/* KEEP: your current custom font rule */
li.cbp-hrmenu-tab > a,
div.cbp-category-link-w > a {
  font-family: 'Open Sans' !important; /* <----- change/modifie la police (font) des liens du méga menu */
  font-weight: 800 !important; /* <----- change/modifie l’épaisseur (gras) du texte (800 = très bold) */
}

/* -------------------------------------------------------
   IQIT MegaMenu FIX (Pos Ruby Layout 6)
   When sticky (.cbp-sticky), remove the boxed .container
-------------------------------------------------------- */

/* Make the sticky bar itself span full width */
#iqitmegamenu-horizontal.cbp-sticky {
  left: 0 !important; /* <----- change/modifie l’ancrage à gauche (0 = collé au bord gauche) */
  right: 0 !important; /* <----- change/modifie l’ancrage à droite (0 = collé au bord droit) */
  width: 100% !important; /* <----- change/modifie la largeur (100% = pleine largeur écran) */
}

/* THIS is the key: unbox the inner container only when sticky */
#iqitmegamenu-horizontal.cbp-sticky > .container {
  width: auto !important; /* <----- change/modifie la largeur du container interne (auto = s’adapte) */
  max-width: none !important; /* <----- change/modifie la largeur max (none = pas de limite) */
}

/* Optional: helps prevent tabs wrapping if space is tight */
#iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul {
  white-space: nowrap !important; /* <----- change/modifie le retour à la ligne (nowrap = jamais de wrap) */
}
#iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul > li {
  display: inline-block !important; /* <----- change/modifie le type d’affichage (inline-block = en ligne) */
  vertical-align: top !important; /* <----- change/modifie l’alignement vertical des items */
}

/* CENTER the menu when sticky */
#iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul {
  display: flex !important; /* <----- change/modifie le mode layout (flex = alignement flexible) */
  justify-content: center !important; /* <----- change/modifie le centrage horizontal (center) */
  align-items: center; /* <----- change/modifie le centrage vertical dans la barre */
}

/* Make sure items behave nicely in flex */
#iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul > li {
  float: none !important; /* <----- change/modifie le float (none = laisse flex gérer) */
}

/* =======================================================
   DESKTOP: TRUE MENU CENTERING (NO PIXEL SHOVES)
======================================================= */
@media (min-width: 768px){
  #iqitmegamenu-horizontal #cbp-hrmenu{
    display: flex !important; /* <----- change/modifie le mode layout du menu (flex) */
    justify-content: center !important; /* <----- change/modifie le centrage horizontal du menu */
  }

  #iqitmegamenu-horizontal #cbp-hrmenu > ul{
    display: flex !important; /* <----- change/modifie le layout de la liste (flex) */
    justify-content: center !important; /* <----- change/modifie le centrage des items */
    left: 0 !important; /* <----- change/modifie la position horizontale (0 = pas de décalage) */
    transform: none !important; /* <----- change/modifie toute transformation (none = pas de déplacement/scale) */
    margin: 0 auto !important; /* <----- change/modifie les marges (auto = centré) */
  }
}

/* Ensure LI items don't fight flex (old float layout) */
#iqitmegamenu-horizontal #cbp-hrmenu > ul > li{
  float: none !important; /* <----- change/modifie le float des items (none) */
}

/* =======================================================
   POS RUBY: TOP SEARCH BAR (sf-menu menu-content)
======================================================= */

/* 1) Remove the black bar background */
ul.sf-menu.menu-content {
  background: transparent !important; /* <----- change/modifie le fond (transparent = invisible) */
  background-color: transparent !important; /* <----- change/modifie la couleur de fond (fallback) */
  box-shadow: none !important; /* <----- change/modifie l’ombre (none = aucune) */
  border: none !important; /* <----- change/modifie la bordure (none = aucune) */
}

/* Some themes paint black on the LI's too */
ul.sf-menu.menu-content > li,
ul.sf-menu.menu-content > li > a {
  background: transparent !important; /* <----- change/modifie le fond des LI/liens (transparent) */
  background-color: transparent !important; /* <----- change/modifie la couleur de fond (fallback) */
}

/* 2) Make the "SEARCH" label not be a black box */
ul.sf-menu.menu-content > li:first-child > a {
  background: transparent !important; /* <----- change/modifie le fond du label SEARCH */
  color: inherit !important; /* <----- change/modifie la couleur (inherit = prend celle du parent) */
  padding: 0 12px !important; /* <----- change/modifie l’espace interne (0 haut/bas, 12px gauche/droite) */
}

/* 3) Style the input so it looks good on a transparent header */
ul.sf-menu.menu-content input#search_query_menu {
  background: rgba(255,255,255,0.15) !important; /* <----- change/modifie le fond de l’input (blanc translucide) */
  border: 2px solid rgba(0,0,0,0.25) !important; /* <----- change/modifie l’épaisseur + couleur de bordure */
  width: 400px !important; /* <----- change/modifie la largeur de l’input (desktop) */
  height: 30px !important; /* <----- change/modifie la hauteur de l’input */
  line-height: 30px !important; /* <----- change/modifie l’alignement vertical du texte (ligne) */
  border-radius: 6px !important; /* <----- change/modifie l’arrondi des coins */
  color: #000 !important; /* <----- change/modifie la couleur du texte */
  box-shadow: none !important; /* <----- change/modifie l’ombre de l’input */
}

/* Placeholder */
ul.sf-menu.menu-content input#search_query_menu::placeholder {
  color: rgba(0,0,0,0.55) !important; /* <----- change/modifie la couleur du placeholder */
}

/* CENTER the search row content */
ul.sf-menu.menu-content {
  display: flex !important; /* <----- change/modifie le layout de la rangée (flex) */
  align-items: center !important; /* <----- change/modifie l’alignement vertical des éléments */
  justify-content: center !important; /* <----- change/modifie le centrage horizontal */
}

/* Make li behave in flex */
ul.sf-menu.menu-content > li {
  float: none !important; /* <----- change/modifie le float (none) */
  display: inline-flex !important; /* <----- change/modifie l’affichage (inline-flex) */
  align-items: center !important; /* <----- change/modifie l’alignement vertical du contenu */
}

/* =======================================================
   FIX spacing between SEARCH label and input
======================================================= */
ul.sf-menu.menu-content { gap: 6px !important; } /* <----- change/modifie l’espace entre éléments (gap) */

ul.sf-menu.menu-content > li:first-child,
ul.sf-menu.menu-content > li:first-child > a {
  margin: 0 !important; /* <----- change/modifie la marge (0 = aucun espace externe) */
  padding-right: 6px !important; /* <----- change/modifie le padding droite du label */
  padding-left: 0 !important; /* <----- change/modifie le padding gauche du label */
}

ul.sf-menu.menu-content > li.sf-search {
  margin: 0 !important; /* <----- change/modifie la marge du bloc search */
  padding: 0 !important; /* <----- change/modifie le padding du bloc search */
}

ul.sf-menu.menu-content input#search_query_menu {
  margin: 0 !important; /* <----- change/modifie la marge autour de l’input */
}

/* =======================================================
   MOVE TOP SEARCH beside language (top-right)
======================================================= */
#header { position: relative !important; } /* <----- change/modifie le contexte de positionnement (relative) */

ul.sf-menu.menu-content {
  position: absolute !important; /* <----- change/modifie le positionnement (absolute) */
  top: 24px !important; /* <----- change/modifie la distance depuis le haut */
  right: -375px !important; /* <----- change/modifie le décalage depuis la droite (négatif = sort vers la droite) */
  z-index: 200 !important; /* <----- change/modifie la priorité de superposition (plus haut = au-dessus) */

  display: flex !important; /* <----- change/modifie le layout (flex) */
  align-items: center !important; /* <----- change/modifie l’alignement vertical */
  justify-content: flex-end !important; /* <----- change/modifie l’alignement horizontal (fin à droite) */
  background: transparent !important; /* <----- change/modifie le fond */
}

/* =======================================================
   DESKTOP FIX: PREVENT SEARCH BAR “DRIFT / ZOOM LOOK”
   (FIXED: removed broken nested @media)
======================================================= */
@media (min-width: 768px){

  /* Reserve space on the right for FR/EN + cart + cog (adjust this number once) */
  :root { --header-right-safe: -270px; } /* <----- change/modifie la marge de sécurité à droite (anti-chevauchement) */

  ul.sf-menu.menu-content{
    right: max(clamp(-350px, -12vw, -375px), var(--header-right-safe)) !important; /* <----- change/modifie l’ancrage à droite (clamp = limite selon largeur/zoom) */
    white-space: nowrap !important; /* <----- change/modifie le wrap (nowrap) */
    flex-wrap: nowrap !important; /* <----- change/modifie le wrap flex (nowrap) */
  }

  ul.sf-menu.menu-content input#search_query_menu{
    width: clamp(240px, 24vw, 330px) !important; /* <----- change/modifie la largeur responsive de l’input */
    max-width: 100% !important; /* <----- change/modifie la largeur max (sécurité) */
    box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles (inclut border/padding) */
  }
}

/* Ensure the li’s don’t float and spacing stays tight */
ul.sf-menu.menu-content > li,
ul.sf-menu.menu-content > li.sf-search {
  float: none !important; /* <----- change/modifie le float (none) */
  margin: 0 !important; /* <----- change/modifie la marge (0) */
  padding: 0 !important; /* <----- change/modifie le padding (0) */
}

/* =======================================================
   CLICK FIX (ZOOM/OVERLAY): do NOT block FRANÇAIS / icons
======================================================= */
ul.sf-menu.menu-content {
  pointer-events: none !important; /* <----- change/modifie la capture des clics (none = laisse cliquer derrière) */
}
ul.sf-menu.menu-content > li:first-child > a,
ul.sf-menu.menu-content input#search_query_menu {
  pointer-events: auto !important; /* <----- change/modifie la capture des clics (auto = cliquable) */
}

/* =======================================================
   REMOVE the header magnifier (between cart and cogwheel)
======================================================= */
a.icon_top i.icon_search,
a.icon_top i.icon_search:before {
  display: none !important; /* <----- change/modifie l’affichage (none = caché) */
}
#search_block_top {
  display: none !important; /* <----- change/modifie l’affichage du bloc search top */
}

/* =======================================================
   FIX: Cogwheel dropdown should POP under the icon (not push layout)
======================================================= */
#header .header_user_info,
#header #languages-block-top,
#header #search_block_top {
  position: relative !important; /* <----- change/modifie le contexte des dropdowns (relative) */
}

#header .header_user_info .toogle_content,
#header .header_user_info .toggle_content,
#header #languages-block-top .toogle_content,
#header #languages-block-top .toggle_content {
  position: absolute !important; /* <----- change/modifie le type de position (absolute) */
  top: 100% !important; /* <----- change/modifie la position verticale (100% = juste sous l’icône) */
  right: 0 !important; /* <----- change/modifie l’ancrage à droite */
  left: auto !important; /* <----- change/modifie l’ancrage à gauche (désactivé) */
  margin-top: 8px !important; /* <----- change/modifie l’espace entre icône et dropdown */
  z-index: 999999 !important; /* <----- change/modifie la priorité de superposition du dropdown */
}

#header .header_user_info .toogle_content,
#header .header_user_info .toggle_content {
  margin-left: 0 !important; /* <----- change/modifie la marge gauche */
  margin-right: 0 !important; /* <----- change/modifie la marge droite */
}

/* Megamenu layering */
#iqitmegamenu-horizontal,
#iqitmegamenu-horizontal.cbp-sticky {
  z-index: 40000 !important; /* <----- change/modifie l’ordre d’empilement du méga menu */
}

#header,
#header .header-container,
#header .nav,
#header .row {
  overflow: visible !important; /* <----- change/modifie le débordement (visible = dropdowns visibles) */
}

/* Put header overlays above menu */
#header,
#header .nav,
#header .row,
#header .header_user_info {
  position: relative !important; /* <----- change/modifie le contexte (relative) */
  z-index: 50000 !important; /* <----- change/modifie la priorité au-dessus du menu */
}

/* Do NOT override sticky positioning; only z-index */
#iqitmegamenu-horizontal { position: relative !important; z-index: 40000 !important; } /* <----- change/modifie le stacking du menu (z-index) */
#iqitmegamenu-horizontal.cbp-sticky { z-index: 40000 !important; } /* <----- change/modifie le stacking en sticky */

/* Force toggle dropdown to top layer */
.header_user_info .toogle_content,
.header_user_info .toggle_content,
#header .toogle_content,
#header .toggle_content {
  position: absolute !important; /* <----- change/modifie le positionnement des dropdowns */
  z-index: 999999 !important; /* <----- change/modifie la priorité des dropdowns */
}

/* IMPORTANT: this was in your code — it can break sticky scripts.
   Keep it ONLY if you truly need it. (Leaving it as you had.) */
#iqitmegamenu-horizontal,
#iqitmegamenu-horizontal.cbp-sticky {
  transform: none !important; /* <----- change/modifie le transform global du menu (none = pas de déplacement/scale) */
}

/* Logo above overlays */
#header_logo,
#header_logo a {
  position: relative !important; /* <----- change/modifie le contexte du logo */
  z-index: 999998 !important; /* <----- change/modifie la priorité du logo */
  pointer-events: auto !important; /* <----- change/modifie la cliquabilité du logo */
}

/* Desktop: prevent invisible overlay stealing clicks */
@media (min-width: 768px){
  #header .block_right { pointer-events: none !important; } /* <----- change/modifie la capture de clics (désactive overlay) */
}

#header .block_right a,
#header .block_right button,
#header .block_right input,
#header .block_right select,
#header .block_right .shopping_cart,
#header .block_right .header_user_info,
#header .block_right #languages-block-top,
#header .block_right form {
  pointer-events: auto !important; /* <----- change/modifie quels éléments restent cliquables */
}

/* Make EXTRA sure magnifier stays hidden */
#header .block_right a.icon_top i.icon_search,
#header .block_right i.icon_search,
#header .block_right #search_block_top {
  display: none !important; /* <----- change/modifie l’affichage (cache la loupe) */
}

/* Nudge cogwheel icon */
#header .icon_cog::before {
  position: relative !important; /* <----- change/modifie le type de position (relative) */
  top: 4px !important; /* <----- change/modifie le décalage vertical de l’icône */
  left: -12px !important; /* <----- change/modifie le décalage horizontal de l’icône */
}
@media (max-width: 767px){
  #header .icon_cog::before{
    top: 4px !important; /* <----- change/modifie le décalage vertical (mobile) */
    left: 18px !important; /* <----- change/modifie le décalage horizontal (mobile) */
  }
}

/* Dropdown layer above page content */
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub {
  z-index: 45000 !important; /* <----- change/modifie le stacking des sous-menus */
  background: #fff !important; /* <----- change/modifie le fond du dropdown */
}
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub-inner {
  background: #fff !important; /* <----- change/modifie le fond interne du dropdown */
}

/* Keep banner blocks below dropdown */
#page .img_content,
#page .slideshow_container,
#page .cms_top {
  position: relative !important; /* <----- change/modifie le contexte (relative) */
  z-index: 1 !important; /* <----- change/modifie le stacking (en-dessous des dropdowns) */
}

/* Keep submenu open */
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub { pointer-events: auto !important; } /* <----- change/modifie la cliquabilité du sous-menu */
#iqitmegamenu-horizontal #cbp-hrmenu > ul > li:hover > .cbp-hrsub,
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub:hover {
  display: block !important; /* <----- change/modifie l’affichage au hover (ouvre) */
  visibility: visible !important; /* <----- change/modifie la visibilité (visible) */
  opacity: 1 !important; /* <----- change/modifie la transparence (1 = opaque) */
}
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub,
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub * {
  transition: none !important; /* <----- change/modifie les transitions (none = pas d’animation) */
}
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub,
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub-inner {
  background: #fff !important; /* <----- change/modifie le fond (blanc) */
  background-color: #fff !important; /* <----- change/modifie la couleur de fond (fallback) */
}

/* FIX: 3rd-level flyout gap */
#iqitmegamenu-horizontal #cbp-hrmenu .cbp-hrsub ul ul {
  left: 100% !important; /* <----- change/modifie la position du 3e niveau (100% = à droite) */
  margin-left: -6px !important; /* <----- change/modifie l’écart entre niveaux (négatif = rapproche) */
}

/* Lightbox above everything */
.fancybox-overlay,
.fancybox-wrap,
.fancybox-opened,
#fancybox-overlay,
#fancybox-wrap,
#fancybox-outer,
.mfp-bg,
.mfp-wrap,
.pswp,
.pswp__bg,
.modal-backdrop,
.modal {
  z-index: 9999999 !important; /* <----- change/modifie la priorité des lightbox/modals (toujours au-dessus) */
}

html.fancybox-lock #header,
body.fancybox-lock #header,
html.fancybox-lock #iqitmegamenu-horizontal,
body.fancybox-lock #iqitmegamenu-horizontal,
html.fancybox-lock #iqitmegamenu-horizontal.cbp-sticky,
body.fancybox-lock #iqitmegamenu-horizontal.cbp-sticky,

body.modal-open #header,
body.modal-open #iqitmegamenu-horizontal,
body.modal-open #iqitmegamenu-horizontal.cbp-sticky,

html.mfp-ready #header,
html.mfp-ready #iqitmegamenu-horizontal,
html.mfp-ready #iqitmegamenu-horizontal.cbp-sticky,

html.pswp--open #header,
html.pswp--open #iqitmegamenu-horizontal,
html.pswp--open #iqitmegamenu-horizontal.cbp-sticky {
  z-index: 1 !important; /* <----- change/modifie le stacking du header/menu pendant une lightbox (mis en arrière) */
}

html.fancybox-lock #header,
body.fancybox-lock #header,
body.modal-open #header,
html.mfp-ready #header,
html.pswp--open #header {
  pointer-events: none !important; /* <----- change/modifie la cliquabilité du header pendant overlay (désactivée) */
}

html.fancybox-lock #iqitmegamenu-horizontal,
body.fancybox-lock #iqitmegamenu-horizontal,
body.modal-open #iqitmegamenu-horizontal,
html.mfp-ready #iqitmegamenu-horizontal,
html.pswp--open #iqitmegamenu-horizontal {
  pointer-events: none !important; /* <----- change/modifie la cliquabilité du menu pendant overlay (désactivée) */
}

/* Fancybox dim level */
.fancybox-overlay.fancybox-overlay-fixed,
.fancybox-overlay {
  background: rgba(0,0,0,0.45) !important; /* <----- change/modifie l’opacité du voile (0.45 = assez sombre) */
}
.fancybox-wrap,
.fancybox-opened {
  z-index: 10000000 !important; /* <----- change/modifie le stacking de la fenêtre fancybox */
}
.fancybox-overlay {
  z-index: 9999999 !important; /* <----- change/modifie le stacking du voile fancybox */
}

/* =======================================================
   MOBILE: layout + sticky behaviour
======================================================= */
@media (max-width: 767px){

  /* Undo desktop absolute positioning on mobile (top of page) */
  ul.sf-menu.menu-content{
    position: relative !important; /* <----- change/modifie le positionnement (mobile) */
    top: auto !important; /* <----- change/modifie l’offset haut (annulé) */
    right: auto !important; /* <----- change/modifie l’offset droite (annulé) */
    left: auto !important; /* <----- change/modifie l’offset gauche (annulé) */

    width: calc(100% - 20px) !important; /* <----- change/modifie la largeur (plein écran moins marge) */
    margin: 8px auto 10px auto !important; /* <----- change/modifie les marges (haut/auto/bas/auto) */
    padding: 0 !important; /* <----- change/modifie le padding (0) */

    display: flex !important; /* <----- change/modifie le layout (flex) */
    flex-wrap: wrap !important; /* <----- change/modifie le retour à la ligne (wrap) */
    align-items: center !important; /* <----- change/modifie l’alignement vertical */
    justify-content: center !important; /* <----- change/modifie le centrage horizontal */

    pointer-events: auto !important; /* <----- change/modifie la cliquabilité (active) */
    z-index: 10 !important; /* <----- change/modifie la priorité mobile */
  }

  /* Hide label on mobile (as you had) */
  ul.sf-menu.menu-content > li:first-child{
    display: none !important; /* <----- change/modifie l’affichage du label (caché) */
  }

  /* Search takes full width on mobile */
  ul.sf-menu.menu-content > li.sf-search{
    float: none !important; /* <----- change/modifie le float (none) */
    width: 100% !important; /* <----- change/modifie la largeur (plein écran) */
    max-width: 520px !important; /* <----- change/modifie la largeur max (évite trop large) */
    display: block !important; /* <----- change/modifie l’affichage (block) */
    flex: 0 0 100% !important; /* <----- change/modifie la place dans flex (100%) */
    margin: 0 !important; /* <----- change/modifie la marge (0) */
    padding: 0 !important; /* <----- change/modifie le padding (0) */
  }
  ul.sf-menu.menu-content input#search_query_menu{
    width: 100% !important; /* <----- change/modifie la largeur de l’input (mobile) */
    max-width: none !important; /* <----- change/modifie la largeur max (aucune limite) */
    height: 36px !important; /* <----- change/modifie la hauteur (mobile) */
    line-height: 36px !important; /* <----- change/modifie l’alignement vertical du texte */
    margin: 0 !important; /* <----- change/modifie la marge (0) */
    box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */
  }

  /* Icons/Lang/Cart row */
  #header .block_right{
    display: flex !important; /* <----- change/modifie le layout de la rangée icônes */
    width: 100% !important; /* <----- change/modifie la largeur */
    flex-wrap: wrap !important; /* <----- change/modifie le wrap */
    align-items: center !important; /* <----- change/modifie l’alignement vertical */
    justify-content: center !important; /* <----- change/modifie le centrage */
    gap: 14px !important; /* <----- change/modifie l’espace entre icônes */
    margin: 24px 0 0 !important; /* <----- change/modifie la marge (pousse vers le bas) */
    pointer-events: auto !important; /* <----- change/modifie la cliquabilité */
  }

  #header .extra_language_block,
  #header #languages-block-top{
    position: relative !important; /* <----- change/modifie le contexte (relative) */
    float: none !important; /* <----- change/modifie le float (none) */
    margin: 0 !important; /* <----- change/modifie la marge (0) */
  }

  #header .extra_language_block a,
  #header #languages-block-top a{
    position: relative !important; /* <----- change/modifie le contexte (relative) */
    top: 18px !important; /* <----- change/modifie le décalage vertical */
    left: 12px !important; /* <----- change/modifie le décalage horizontal */
  }

  /* Menu trigger position on mobile */
  #iqitmegamenu-horizontal #cbp-hrmenu > ul{
    left: 0 !important; /* <----- change/modifie l’offset gauche */
    justify-content: flex-start !important; /* <----- change/modifie l’alignement (début) */
  }

  /* Sticky bar on scroll */
  #iqitmegamenu-horizontal.cbp-sticky{
    position: fixed !important; /* <----- change/modifie le type sticky (fixed) */
    top: 0 !important; /* <----- change/modifie la position en haut */
    left: 0 !important; /* <----- change/modifie l’ancrage gauche */
    right: 0 !important; /* <----- change/modifie l’ancrage droit */
    width: 100% !important; /* <----- change/modifie la largeur */
    z-index: 75000 !important; /* <----- change/modifie la priorité sticky mobile */
    background: #fff !important; /* <----- change/modifie le fond sticky */

    transform: none !important; /* <----- change/modifie le transform sticky */
    min-height: 50px !important; /* <----- change/modifie la hauteur minimale sticky */
  }

  /* Keep hamburger visible */
  #iqitmegamenu-horizontal.cbp-sticky li.cbp-hrmenu-tab,
  #iqitmegamenu-horizontal.cbp-sticky .cbp-hrtrigger,
  #iqitmegamenu-horizontal.cbp-sticky .cbp-hrtrigger-wrapper{
    position: fixed !important; /* <----- change/modifie le positionnement (fixed) */
    top: 8px !important; /* <----- change/modifie la distance du haut */
    left: 10px !important; /* <----- change/modifie la distance de gauche */
    right: auto !important; /* <----- change/modifie l’ancrage droite (désactivé) */
    z-index: 75001 !important; /* <----- change/modifie la priorité au-dessus du menu sticky */

    display: block !important; /* <----- change/modifie l’affichage */
    visibility: visible !important; /* <----- change/modifie la visibilité */
    opacity: 1 !important; /* <----- change/modifie l’opacité */
  }

  /* Small logo position */
  #header_logo{
    position: fixed !important; /* <----- change/modifie le positionnement du logo (fixed) */
    top: 6px !important; /* <----- change/modifie la position verticale */
    left: 50% !important; /* <----- change/modifie la position horizontale (50% = centre) */
    right: auto !important; /* <----- change/modifie l’ancrage droite */
    transform: translateX(-50%) !important; /* <----- change/modifie le centrage réel du logo */
    z-index: 75001 !important; /* <----- change/modifie la priorité du logo sticky */
    display: block !important; /* <----- change/modifie l’affichage */
  }

  /* When sticky, logo far right (NOTE: requires :has() support) */
  #header:has(#iqitmegamenu-horizontal.cbp-sticky) #header_logo{
    left: auto !important; /* <----- change/modifie l’ancrage gauche (désactivé) */
    right: 12px !important; /* <----- change/modifie la distance depuis la droite */
    transform: none !important; /* <----- change/modifie le transform (pas de centrage) */
  }

  #header_logo img{
    max-height: 40px !important; /* <----- change/modifie la hauteur max du logo (mobile sticky) */
    width: auto !important; /* <----- change/modifie la largeur (auto) */
  }

  /* Cog dropdown anchor */
  #header .header_user{
    position: relative !important; /* <----- change/modifie le contexte du dropdown */
  }
  #header .header_user .toogle_content,
  #header .header_user .toggle_content{
    left: auto !important; /* <----- change/modifie l’ancrage gauche */
    right: -200px !important; /* <----- change/modifie le décalage droite (pousse vers l’extérieur) */
    top: 100% !important; /* <----- change/modifie la position sous l’icône */
  }
}

/* =======================================================
   HOME visible ONLY when scrolled (sticky)
======================================================= */
#iqitmegamenu-horizontal:not(.cbp-sticky) #cbp-hrmenu > ul > li.cbp-hrmenu-tab-13{
  display: none !important; /* <----- change/modifie l’affichage du HOME quand NON sticky (caché) */
}
#iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul > li.cbp-hrmenu-tab-13{
  display: inline-block !important; /* <----- change/modifie l’affichage du HOME quand sticky (visible) */
}

/* =======================================================
   CATEGORY 220 banner (LIQUIDATION / CLEARANCE)
======================================================= */
@media (max-width: 767px){
  .cms_top .img_content a[href*="220-liquidation"],
  .cms_top .img_content a[href*="220-clearance"]{
    display: block !important; /* <----- change/modifie l’affichage du lien bannière (visible) */
    height: auto !important; /* <----- change/modifie la hauteur (auto) */
    overflow: visible !important; /* <----- change/modifie le débordement (visible) */
  }

  .cms_top .img_content a[href*="220-liquidation"] > img,
  .cms_top .img_content a[href*="220-clearance"] > img{
    width: 100% !important; /* <----- change/modifie la largeur de l’image (plein conteneur) */
    height: auto !important; /* <----- change/modifie la hauteur (auto) */
    max-height: none !important; /* <----- change/modifie la hauteur max (aucune limite) */
    display: block !important; /* <----- change/modifie l’affichage */
    object-fit: initial !important; /* <----- change/modifie le recadrage (initial = défaut) */
  }
}

@media (min-width: 768px){
  .cms_top .img_content a[href*="220-liquidation"],
  .cms_top .img_content a[href*="220-clearance"]{
    display: block !important; /* <----- change/modifie l’affichage */
    height: 360px !important; /* <----- change/modifie la hauteur bannière (desktop) */
    overflow: hidden !important; /* <----- change/modifie le recadrage (cache ce qui dépasse) */
  }

  .cms_top .img_content a[href*="220-liquidation"] > img,
  .cms_top .img_content a[href*="220-clearance"] > img{
    width: 100% !important; /* <----- change/modifie la largeur image */
    height: 360px !important; /* <----- change/modifie la hauteur image (match conteneur) */
    max-height: none !important; /* <----- change/modifie la hauteur max */
    display: block !important; /* <----- change/modifie l’affichage */
    object-fit: cover !important; /* <----- change/modifie le recadrage (cover = remplit en coupant) */
  }
}

/* =======================================================
   TRUE CENTER IGNORING HOME (HOME has 0 width in layout)
======================================================= */
@media (min-width: 768px){
  #iqitmegamenu-horizontal #cbp-hrmenu > ul{
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
  }

  #iqitmegamenu-horizontal #cbp-hrmenu > ul > li.cbp-hrmenu-tab-13{
    flex: 0 0 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
  }

  #iqitmegamenu-horizontal #cbp-hrmenu > ul > li.cbp-hrmenu-tab-13 > a{
    position: absolute !important;

    /* ===== EN (par défaut) ===== */
    left: -195px !important;

    top: 50% !important;
    transform: translateY(-50%) !important;

    display: inline-flex !important;
    align-items: center !important;

    pointer-events: auto !important;
    z-index: 5 !important;
    white-space: nowrap !important;
  }

  /* ===== FR uniquement ===== */
  html[lang^="fr"]
  #iqitmegamenu-horizontal #cbp-hrmenu > ul > li.cbp-hrmenu-tab-13 > a{
    left: -157px !important; /* -195px + 42px */
  }
}

/* =======================================================
   MOBILE ONLY: Search + Menu sticky stack (NO GAP)
======================================================= */
@media (max-width: 767px){

  :root{
    --sticky-search-h: 46px; /* <----- change/modifie la hauteur de la barre search sticky (mobile) */
    --sticky-menu-h: 50px; /* <----- change/modifie la hauteur du menu sticky (mobile) */
    --sticky-gap: 0px; /* <----- change/modifie l’espace entre search et menu sticky */
  }

  @supports selector(:has(*)) {

    #header:has(#iqitmegamenu-horizontal.cbp-sticky) ul.sf-menu.menu-content{
      position: fixed !important; /* <----- change/modifie le positionnement sticky (fixed) */
      top: 0 !important; /* <----- change/modifie la position en haut */
      left: 0 !important; /* <----- change/modifie l’ancrage gauche */
      right: 0 !important; /* <----- change/modifie l’ancrage droite */

      width: 100vw !important; /* <----- change/modifie la largeur (plein viewport) */
      max-width: none !important; /* <----- change/modifie la largeur max */
      margin: 0 !important; /* <----- change/modifie la marge */
      box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */

      height: var(--sticky-search-h) !important; /* <----- change/modifie la hauteur via variable */
      margin: 0 !important; /* <----- change/modifie la marge (répété, garde 0) */
      padding: 6px 10px !important; /* <----- change/modifie le padding interne (confort) */

      display: flex !important; /* <----- change/modifie le layout */
      align-items: center !important; /* <----- change/modifie l’alignement vertical */
      justify-content: center !important; /* <----- change/modifie le centrage horizontal */

      background: rgba(255,255,255,0.75) !important; /* <----- change/modifie le fond translucide sticky */
      border-radius: 0 !important; /* <----- change/modifie l’arrondi */
      box-shadow: none !important; /* <----- change/modifie l’ombre */

      z-index: 99999 !important; /* <----- change/modifie la priorité (au-dessus) */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */
      transform: none !important; /* <----- change/modifie le transform */
    }

    #header:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li:first-child{
      display: none !important; /* <----- change/modifie l’affichage du label en sticky */
    }

    #header:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search{
      float: none !important; /* <----- change/modifie le float */
      width: 100% !important; /* <----- change/modifie la largeur */
      max-width: 520px !important; /* <----- change/modifie la largeur max */
      flex: 0 0 100% !important; /* <----- change/modifie la place dans flex */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      display: block !important; /* <----- change/modifie l’affichage */
    }

    #header:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content input#search_query_menu{
      width: 100% !important; /* <----- change/modifie la largeur input sticky */
      height: calc(var(--sticky-search-h) - 12px) !important; /* <----- change/modifie la hauteur (via variable) */
      line-height: calc(var(--sticky-search-h) - 12px) !important; /* <----- change/modifie l’alignement vertical */
      margin: 0 !important; /* <----- change/modifie la marge */

      background: rgba(255,255,255,0.78) !important; /* <----- change/modifie le fond (plus opaque) */
      backdrop-filter: blur(10px) !important; /* <----- change/modifie le flou arrière-plan (effet verre) */
      -webkit-backdrop-filter: blur(10px) !important; /* <----- change/modifie le flou (Safari) */
    }

    #iqitmegamenu-horizontal.cbp-sticky{
      position: fixed !important; /* <----- change/modifie le positionnement sticky */
      top: var(--sticky-search-h) !important; /* <----- change/modifie la position sous la search */
      left: 0 !important; /* <----- change/modifie l’ancrage gauche */
      right: 0 !important; /* <----- change/modifie l’ancrage droite */
      width: 100% !important; /* <----- change/modifie la largeur */

      background: #fff !important; /* <----- change/modifie le fond */
      box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important; /* <----- change/modifie l’ombre (profondeur) */

      transform: none !important; /* <----- change/modifie le transform */
      z-index: 99998 !important; /* <----- change/modifie la priorité (juste sous la search) */
    }

    #iqitmegamenu-horizontal.cbp-sticky li.cbp-hrmenu-tab,
    #iqitmegamenu-horizontal.cbp-sticky .cbp-hrtrigger,
    #iqitmegamenu-horizontal.cbp-sticky .cbp-hrtrigger-wrapper{
      position: fixed !important; /* <----- change/modifie le positionnement */
      top: calc(var(--sticky-search-h) + 8px) !important; /* <----- change/modifie la position verticale */
      z-index: 100000 !important; /* <----- change/modifie la priorité */
    }

    #header:has(#iqitmegamenu-horizontal.cbp-sticky) #header_logo{
      position: fixed !important; /* <----- change/modifie le positionnement du logo */
      top: calc(var(--sticky-search-h) + 6px) !important; /* <----- change/modifie la position verticale */
      z-index: 100000 !important; /* <----- change/modifie la priorité */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky) #page{
      padding-top: calc(var(--sticky-search-h) + var(--sticky-menu-h)) !important; /* <----- change/modifie le padding-top pour éviter que le contenu passe sous les barres */
    }
  }
}

/* ======================================================= 
   MOBILE sticky: show 3 custom links inside burger ONLY when sticky
======================================================= */
@media (max-width: 767px){
  @supports selector(:has(*)) {

    body:has(#iqitmegamenu-horizontal.cbp-sticky) #header .header_user_info,
    body:has(#iqitmegamenu-horizontal.cbp-sticky) #header .shopping_cart,
    body:has(#iqitmegamenu-horizontal.cbp-sticky) #header #languages-block-top,
    body:has(#iqitmegamenu-horizontal.cbp-sticky) #header .extra_language_block{
      display: none !important; /* <----- change/modifie l’affichage (cache ces blocs en sticky) */
    }

    #iqitmegamenu-horizontal a[href*="/my-account"],
    #iqitmegamenu-horizontal a[href*="/order"],
    #iqitmegamenu-horizontal a[href*="controller=language"]{
      display: none !important; /* <----- change/modifie l’affichage (cache ces liens par défaut) */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-horizontal a[href*="/my-account"],
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-horizontal a[href*="/order"],
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-horizontal a[href*="controller=language"]{
      display: inline-flex !important; /* <----- change/modifie l’affichage (montre en sticky) */

      align-items: center !important; /* <----- change/modifie le centrage vertical */
      justify-content: center !important; /* <----- change/modifie le centrage horizontal */

      width: 44px !important; /* <----- change/modifie la largeur “bouton” */
      height: 44px !important; /* <----- change/modifie la hauteur “bouton” */

      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */

      border-radius: 10px !important; /* <----- change/modifie l’arrondi */
      border: 1px solid rgba(0,0,0,0.18) !important; /* <----- change/modifie la bordure (fine, gris clair) */

      background: rgba(255,255,255,0.92) !important; /* <----- change/modifie le fond */
      color: #000 !important; /* <----- change/modifie la couleur du texte */
      text-decoration: none !important; /* <----- change/modifie le soulignement (none) */

      font-weight: 800 !important; /* <----- change/modifie le gras */
      line-height: 1 !important; /* <----- change/modifie la hauteur de ligne */
      white-space: nowrap !important; /* <----- change/modifie le wrap */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-horizontal a[href*="controller=language"]{
      width: auto !important; /* <----- change/modifie la largeur (auto pour FR/EN) */
      padding: 0 12px !important; /* <----- change/modifie le padding horizontal */
      font-size: 14px !important; /* <----- change/modifie la taille du texte FR/EN */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-horizontal a[href*="/my-account"]{ margin-right: 12px !important; } /* <----- change/modifie l’espace à droite (séparation boutons) */

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-horizontal a[href*="/order"]{ margin-right: 12px !important; } /* <----- change/modifie l’espace à droite (séparation boutons) */
  }
}

/* =======================================================
   MOBILE sticky: TRUE icon row at top of IQIT accordion
======================================================= */
@media (max-width: 767px){
  @supports selector(:has(*)) {

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion{
      padding: 0 !important; /* <----- change/modifie le padding du bloc accordion */
      margin: 0 !important; /* <----- change/modifie la marge du bloc accordion */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:not(:has(a)){
      display: none !important; /* <----- change/modifie l’affichage (cache les items sans lien) */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a){
      float: none !important; /* <----- change/modifie le float */
      clear: none !important; /* <----- change/modifie le clear */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(1),
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(2),
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(3){
      float: left !important; /* <----- change/modifie l’alignement (met les 3 boutons en ligne) */
      clear: none !important; /* <----- change/modifie le clear */
      width: auto !important; /* <----- change/modifie la largeur */
      display: block !important; /* <----- change/modifie l’affichage */

      margin: 10px 6px 10px 6px !important; /* <----- change/modifie la marge autour des boutons */
      padding: 0 !important; /* <----- change/modifie le padding */
      border: none !important; /* <----- change/modifie la bordure */
      background: transparent !important; /* <----- change/modifie le fond */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(4){
      clear: both !important; /* <----- change/modifie le retour à la ligne après les 3 boutons */
      border-top: 1px solid rgba(0,0,0,0.10) !important; /* <----- change/modifie la ligne de séparation */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(1) > a,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(2) > a,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(3) > a{
      display: inline-flex !important; /* <----- change/modifie l’affichage (bouton) */
      align-items: center !important; /* <----- change/modifie le centrage vertical */
      justify-content: center !important; /* <----- change/modifie le centrage horizontal */

      width: 44px !important; /* <----- change/modifie la largeur du bouton */
      height: 44px !important; /* <----- change/modifie la hauteur du bouton */

      border-radius: 10px !important; /* <----- change/modifie l’arrondi */
      border: 1px solid rgba(0,0,0,0.18) !important; /* <----- change/modifie la bordure */
      background: rgba(255,255,255,0.92) !important; /* <----- change/modifie le fond */

      text-decoration: none !important; /* <----- change/modifie le soulignement */

      color: transparent !important; /* <----- change/modifie la couleur du texte (transparent pour cacher) */
      font-size: 0 !important; /* <----- change/modifie la taille du texte (0 pour cacher) */
      line-height: 0 !important; /* <----- change/modifie la hauteur de ligne (0 pour cacher) */

      position: relative !important; /* <----- change/modifie le contexte pour ::before */
      overflow: hidden !important; /* <----- change/modifie le débordement */
      padding: 0 !important; /* <----- change/modifie le padding */
      margin: 0 !important; /* <----- change/modifie la marge */

      box-shadow: none !important; /* <----- change/modifie l’ombre */
      background-image: none !important; /* <----- change/modifie l’image de fond */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(1) > a::before,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(2) > a::before,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(3) > a::before{
      content: "" !important; /* <----- change/modifie le contenu affiché (sera remplacé par ⚙/🛒/FR-EN) */
      position: absolute !important; /* <----- change/modifie la position de l’icône texte */
      inset: 0 !important; /* <----- change/modifie l’étirement (0 = plein bouton) */

      display: flex !important; /* <----- change/modifie le layout */
      align-items: center !important; /* <----- change/modifie le centrage vertical */
      justify-content: center !important; /* <----- change/modifie le centrage horizontal */

      color: #000 !important; /* <----- change/modifie la couleur de l’icône texte */
      font-weight: 800 !important; /* <----- change/modifie le gras */
      line-height: 1 !important; /* <----- change/modifie la hauteur de ligne */
      pointer-events: none !important; /* <----- change/modifie la cliquabilité (désactive sur l’icône) */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(1) > a::before{
      content: "⚙" !important; /* <----- change/modifie le symbole du bouton 1 (cog) */
      font-size: 20px !important; /* <----- change/modifie la taille du symbole */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(2) > a::before{
      content: "🛒" !important; /* <----- change/modifie le symbole du bouton 2 (panier) */
      font-size: 20px !important; /* <----- change/modifie la taille du symbole */
    }

    body.lang_en:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(3) > a::before{
      content: "FR" !important; /* <----- change/modifie le texte du bouton langue (si EN actif) */
      font-size: 14px !important; /* <----- change/modifie la taille du texte */
      letter-spacing: 0.5px !important; /* <----- change/modifie l’espacement des lettres */
    }

    body:not(.lang_en):has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(3) > a::before{
      content: "EN" !important; /* <----- change/modifie le texte du bouton langue (si FR actif) */
      font-size: 14px !important; /* <----- change/modifie la taille du texte */
      letter-spacing: 0.5px !important; /* <----- change/modifie l’espacement des lettres */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion::after{
      content: "" !important; /* <----- change/modifie le clear (hack de flottants) */
      display: block !important; /* <----- change/modifie l’affichage */
      clear: both !important; /* <----- change/modifie le clear */
    }
  }
}

/* =======================================================
   MOBILE: hide ONLY the 3 action items when NOT sticky
======================================================= */
@media (max-width: 767px){
  @supports selector(:has(*)) {

    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #iqitmegamenu-accordion > li:has(a):nth-of-type(1),
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #iqitmegamenu-accordion > li:has(a):nth-of-type(2),
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #iqitmegamenu-accordion > li:has(a):nth-of-type(3){
      display: none !important; /* <----- change/modifie l’affichage des 3 actions quand NON sticky (caché) */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(1),
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(2),
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #iqitmegamenu-accordion > li:has(a):nth-of-type(3){
      display: block !important; /* <----- change/modifie l’affichage des 3 actions quand sticky (visible) */
    }
  }
}

/* ========================================================= 
   PRESTASHOP 1.6 – SUBCATEGORIES = TITLE ABOVE LINE + TEXT NAV ROW
========================================================= */

body#category #subcategories .subcategory-image,
body#category #subcategories .subcategory-image *,
body#category #subcategories ul li img,
body#category #subcategories ul li .img,
body#category #subcategories ul li .img *,
body#category #subcategories ul li a img,
body#category #subcategories ul li a img{
  display: none !important; /* <----- change/modifie l’affichage des images (les cache) */
}

body#category #subcategories ul{
  list-style: none !important; /* <----- change/modifie les puces (none) */
  margin: 16px 0 0 0 !important; /* <----- change/modifie la marge au-dessus */
  padding: 0 !important; /* <----- change/modifie le padding */

  display: flex !important; /* <----- change/modifie le layout (flex) */
  flex-wrap: nowrap !important; /* <----- change/modifie le wrap */
  justify-content: center !important; /* <----- change/modifie le centrage */
  gap: 26px !important; /* <----- change/modifie l’espace entre sous-catégories */
  align-items: center !important; /* <----- change/modifie l’alignement vertical */

  border: 0 !important; /* <----- change/modifie la bordure */
  background: transparent !important; /* <----- change/modifie le fond */
}

body#category #subcategories ul li{
  float: none !important; /* <----- change/modifie le float */
  width: auto !important; /* <----- change/modifie la largeur */
  height: auto !important; /* <----- change/modifie la hauteur */

  flex: 0 0 auto !important; /* <----- change/modifie la place dans flex */
  text-align: center !important; /* <----- change/modifie l’alignement du texte */

  margin: 0 !important; /* <----- change/modifie la marge */
  padding: 0 !important; /* <----- change/modifie le padding */

  border: 0 !important; /* <----- change/modifie la bordure */
  background: transparent !important; /* <----- change/modifie le fond */
  box-shadow: none !important; /* <----- change/modifie l’ombre */
}

body#category #subcategories ul li a,
body#category #subcategories ul li .subcategory-name{
  display: inline-block !important; /* <----- change/modifie l’affichage du texte */
  font-size: 13px !important; /* <----- change/modifie la taille du texte */
  font-weight: 800 !important; /* <----- change/modifie le gras */
  color: #000 !important; /* <----- change/modifie la couleur */
  text-decoration: none !important; /* <----- change/modifie le soulignement */
  padding: 2px 4px !important; /* <----- change/modifie le padding autour du texte */
  white-space: nowrap !important; /* <----- change/modifie le wrap */
}

@media (max-width: 991px){
  body#category #subcategories ul{
    flex-wrap: wrap !important; /* <----- change/modifie le wrap (tablettes) */
    justify-content: center !important; /* <----- change/modifie le centrage */
    gap: 18px !important; /* <----- change/modifie l’espace (tablettes) */
  }

  body#category #subcategories ul li{
    flex: 0 0 auto !important; /* <----- change/modifie la place dans flex */
  }
}

/* =========================================================
   CATEGORY PAGE: reduce space between main menu and the line
========================================================= */
body#category #columns{
  padding-top: 0 !important; /* <----- change/modifie l’espace au-dessus du contenu */
  margin-top: 0 !important; /* <----- change/modifie la marge au-dessus */
}

body#category .breadcrumb{
  margin-bottom: 10px !important; /* <----- change/modifie l’espace sous le breadcrumb */
  padding-bottom: 0 !important; /* <----- change/modifie le padding bas */
}

body#category #subcategories{
  margin-top: 0 !important; /* <----- change/modifie la marge au-dessus */
  padding-top: 0 !important; /* <----- change/modifie le padding au-dessus */
}

body#category #subcategories > h3,
body#category #subcategories .page-subheading{
  margin-top: 0 !important; /* <----- change/modifie la marge au-dessus */
  padding-top: 0 !important; /* <----- change/modifie le padding au-dessus */
}

/* =========================================================
   MOBILE ONLY – Subcategories: centered + even on ALL mobiles
========================================================= */
@media (max-width: 767px){

  body#category #subcategories{
    width: 100% !important; /* <----- change/modifie la largeur */
    margin-left: auto !important; /* <----- change/modifie le centrage */
    margin-right: auto !important; /* <----- change/modifie le centrage */
  }

  body#category #subcategories ul::before,
  body#category #subcategories ul::after{
    content: none !important; /* <----- change/modifie le contenu pseudo-élément (supprimé) */
    display: none !important; /* <----- change/modifie l’affichage (supprimé) */
  }

  body#category #subcategories ul > li:empty{
    display: none !important; /* <----- change/modifie l’affichage des items vides (cachés) */
  }

  body#category #subcategories ul{
    list-style: none !important; /* <----- change/modifie les puces */

    width: 100% !important; /* <----- change/modifie la largeur */
    max-width: 100% !important; /* <----- change/modifie la largeur max */
    margin: 12px auto 0 auto !important; /* <----- change/modifie la marge */
    padding: 0 12px !important; /* <----- change/modifie le padding horizontal */
    box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */

    display: grid !important; /* <----- change/modifie le layout (grid) */
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important; /* <----- change/modifie la taille mini des colonnes (70px) */

    justify-content: center !important; /* <----- change/modifie l’alignement global */
    justify-items: center !important; /* <----- change/modifie l’alignement des items */
    align-items: center !important; /* <----- change/modifie l’alignement vertical */

    grid-auto-flow: row dense !important; /* <----- change/modifie le placement auto des items */

    column-gap: clamp(10px, 3vw, 18px) !important; /* <----- change/modifie l’écart horizontal (responsive) */
    row-gap: 0px !important; /* <----- change/modifie l’écart vertical */

    border: 0 !important; /* <----- change/modifie la bordure */
    background: transparent !important; /* <----- change/modifie le fond */
  }

  body#category #subcategories ul li{
    float: none !important; /* <----- change/modifie le float */
    clear: none !important; /* <----- change/modifie le clear */

    width: auto !important; /* <----- change/modifie la largeur */
    margin: 0 !important; /* <----- change/modifie la marge */
    padding: 0 !important; /* <----- change/modifie le padding */

    text-align: center !important; /* <----- change/modifie l’alignement texte */
    border: 0 !important; /* <----- change/modifie la bordure */
    background: transparent !important; /* <----- change/modifie le fond */
    box-shadow: none !important; /* <----- change/modifie l’ombre */
  }

  body#category #subcategories ul li a,
  body#category #subcategories ul li .subcategory-name{
    display: inline-block !important; /* <----- change/modifie l’affichage */

    font-size: 12.5px !important; /* <----- change/modifie la taille du texte */
    font-weight: 800 !important; /* <----- change/modifie le gras */
    color: #000 !important; /* <----- change/modifie la couleur */
    text-decoration: none !important; /* <----- change/modifie le soulignement */

    padding: 2px 2px !important; /* <----- change/modifie le padding */
    letter-spacing: 0.3px !important; /* <----- change/modifie l’espacement des lettres */
    white-space: nowrap !important; /* <----- change/modifie le wrap */
  }
}

/* =========================================================
   DESKTOP ONLY – Subcategories FOLLOW the IQIT sticky (TIGHT + NO TITLE)
========================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{ --iqit-sticky-h: 45px; } /* <----- change/modifie la hauteur du menu sticky (pour placer subcats dessous) */

    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories{
      position: fixed !important; /* <----- change/modifie le positionnement (fixe sous le menu) */
      top: var(--iqit-sticky-h) !important; /* <----- change/modifie la position sous le sticky (via variable) */
      left: 0 !important; /* <----- change/modifie l’ancrage gauche */
      right: 0 !important; /* <----- change/modifie l’ancrage droite */
      width: 100% !important; /* <----- change/modifie la largeur */

      z-index: 39999 !important; /* <----- change/modifie la priorité */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */

      background: rgba(255,255,255,0.92) !important; /* <----- change/modifie le fond translucide */
      backdrop-filter: blur(10px) !important; /* <----- change/modifie le flou */
      -webkit-backdrop-filter: blur(10px) !important; /* <----- change/modifie le flou (Safari) */

      border: 0 !important; /* <----- change/modifie la bordure */
      box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important; /* <----- change/modifie l’ombre */
      transform: none !important; /* <----- change/modifie le transform */
    }

    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories > h3,
    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories .page-subheading{
      display: none !important; /* <----- change/modifie l’affichage du titre (caché) */
      height: 0 !important; /* <----- change/modifie la hauteur */
      line-height: 0 !important; /* <----- change/modifie la hauteur de ligne */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      border: 0 !important; /* <----- change/modifie la bordure */
    }

    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories ul{
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 6px 14px !important; /* <----- change/modifie le padding interne */
      display: flex !important; /* <----- change/modifie le layout */
      justify-content: center !important; /* <----- change/modifie le centrage */
      align-items: center !important; /* <----- change/modifie l’alignement vertical */
      flex-wrap: nowrap !important; /* <----- change/modifie le wrap */
      gap: 26px !important; /* <----- change/modifie l’espace entre liens */

      background: transparent !important; /* <----- change/modifie le fond */
      border: 0 !important; /* <----- change/modifie la bordure */
    }

    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories ul li{
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      line-height: 1 !important; /* <----- change/modifie la hauteur de ligne */
    }
    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories ul li a,
    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #subcategories ul li .subcategory-name{
      padding: 0 4px !important; /* <----- change/modifie le padding horizontal */
      line-height: 1 !important; /* <----- change/modifie la hauteur de ligne */
    }

    body#category:has(#iqitmegamenu-horizontal.cbp-sticky) #columns{
      padding-top: 80px !important; /* <----- change/modifie l’espace au-dessus du contenu (compense barres fixes) */
    }

    body#category:not(:has(#iqitmegamenu-horizontal.cbp-sticky)) #columns{
      padding-top: 0 !important; /* <----- change/modifie l’espace au-dessus (normal) */
    }
  }
}

/* =========================================================
   CATEGORY – Remove "Subcategories" title + phantom spacing
========================================================= */
body#category #subcategories .subcategory-heading,
body#category #subcategories > p.subcategory-heading,
body#category #subcategories > h3,
body#category #subcategories .page-subheading{
  display: none !important; /* <----- change/modifie l’affichage (cache titres) */
  margin: 0 !important; /* <----- change/modifie la marge */
  padding: 0 !important; /* <----- change/modifie le padding */
  height: 0 !important; /* <----- change/modifie la hauteur */
}

body#category #subcategories{
  margin-top: 0 !important; /* <----- change/modifie la marge au-dessus */
  padding-top: 0 !important; /* <----- change/modifie le padding au-dessus */
}

body#category #subcategories ul{
  margin-top: 0 !important; /* <----- change/modifie la marge au-dessus */
  padding-top: 0 !important; /* <----- change/modifie le padding au-dessus */
}

body#category #subcategories::before,
body#category #subcategories::after,
body#category #subcategories ul::before,
body#category #subcategories ul::after{
  content: none !important; /* <----- change/modifie le contenu pseudo-élément (supprimé) */
  display: none !important; /* <----- change/modifie l’affichage (supprimé) */
}

/* IQIT MegaMenu – remove root category title inside dropdown */
#iqitmegamenu-horizontal .cbp-hrsub .cbp-column-title,
#iqitmegamenu-horizontal .cbp-hrsub h4,
#iqitmegamenu-horizontal .cbp-hrsub .block-title {
  display: none !important; /* <----- change/modifie l’affichage des titres dans le dropdown (cachés) */
  height: 0 !important; /* <----- change/modifie la hauteur */
  margin: 0 !important; /* <----- change/modifie la marge */
  padding: 0 !important; /* <----- change/modifie le padding */
}

/* =======================================================
   DESKTOP ONLY: top-of-page divider under main menu (NON-sticky)
======================================================= */
@media (min-width: 768px){

  :root{
    --menu-line-w: 1220px; /* <----- change/modifie la largeur max de la ligne sous le menu */
    --menu-line-thickness: 0.5px; /* <----- change/modifie l’épaisseur de la ligne */
    --menu-line-color: rgba(0,0,0,0.15); /* <----- change/modifie la couleur (et opacité) de la ligne */
    --menu-line-inset: 30px; /* <----- change/modifie la marge latérale (ligne moins large que l’écran) */
  }

  #iqitmegamenu-horizontal:not(.cbp-sticky){
    position: relative !important; /* <----- change/modifie le contexte pour ::after */
  }

  #iqitmegamenu-horizontal:not(.cbp-sticky)::after{
    content: "" !important; /* <----- change/modifie le contenu pseudo-élément (ligne) */
    position: absolute !important; /* <----- change/modifie le positionnement de la ligne */
    left: 50% !important; /* <----- change/modifie l’ancrage horizontal (centre) */
    transform: translateX(-50%) !important; /* <----- change/modifie le centrage réel */
    bottom: 0 !important; /* <----- change/modifie la position verticale (bas) */

    width: min(var(--menu-line-w), calc(100% - var(--menu-line-inset))) !important; /* <----- change/modifie la largeur de la ligne */
    height: var(--menu-line-thickness) !important; /* <----- change/modifie l’épaisseur de la ligne */
    background: var(--menu-line-color) !important; /* <----- change/modifie la couleur de la ligne */

    pointer-events: none !important; /* <----- change/modifie la capture des clics (désactivée) */
  }

  #iqitmegamenu-horizontal.cbp-sticky::after{
    content: none !important; /* <----- change/modifie l’affichage de la ligne en sticky (désactivée) */
  }

  #iqitmegamenu-horizontal:not(.cbp-sticky) .container,
  #iqitmegamenu-horizontal:not(.cbp-sticky) .container-fluid{
    border-bottom: none !important; /* <----- change/modifie la bordure sous container (supprimée) */
  }
}

.breadcrumb,
.breadcrumb a{
  display: block !important; /* <----- change/modifie l’affichage (force visible) */
  visibility: visible !important; /* <----- change/modifie la visibilité */
  opacity: 1 !important; /* <----- change/modifie l’opacité */
  pointer-events: auto !important; /* <----- change/modifie la cliquabilité */
}

/* =======================================================
   PS 1.6 — "nb items per page" (DESKTOP ONLY)
======================================================= */
@media (min-width: 768px){

  .content_sortPagiBar .nbrItemPage{
    margin-left: -600px !important; /* <----- change/modifie le décalage horizontal du bloc (gros shift à gauche) */
  }

  .content_sortPagiBar .nbrItemPage .selector1{
    display: inline-flex !important; /* <----- change/modifie l’affichage */
    align-items: center !important; /* <----- change/modifie l’alignement vertical */
    white-space: nowrap !important; /* <----- change/modifie le wrap */
    gap: 8px !important; /* <----- change/modifie l’espace entre éléments */

    position: relative !important; /* <----- change/modifie le contexte */
    overflow: visible !important; /* <----- change/modifie le débordement */
    background: transparent !important; /* <----- change/modifie le fond */
  }

  .content_sortPagiBar .nbrItemPage label{
    display: none !important; /* <----- change/modifie l’affichage du label (caché) */
  }

  .content_sortPagiBar .nbrItemPage select{
    margin: 0 !important; /* <----- change/modifie la marge */
    padding: 0 !important; /* <----- change/modifie le padding */
    height: 24px !important; /* <----- change/modifie la hauteur du select */
    vertical-align: middle !important; /* <----- change/modifie l’alignement vertical */
    background: transparent !important; /* <----- change/modifie le fond */
  }

  .content_sortPagiBar .nbrItemPage .selector1 > span{
    display: block !important; /* <----- change/modifie l’affichage */
    height: 24px !important; /* <----- change/modifie la hauteur */
    line-height: 24px !important; /* <----- change/modifie l’alignement vertical */
    padding-right: 20px !important; /* <----- change/modifie l’espace pour la flèche */
    text-align: left !important; /* <----- change/modifie l’alignement du texte */
    box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */
    text-indent: 0px !important; /* <----- change/modifie l’indentation */
    min-width: 48px !important; /* <----- change/modifie la largeur mini */
    background: transparent !important; /* <----- change/modifie le fond */
    box-shadow: none !important; /* <----- change/modifie l’ombre */
    border-radius: 0 !important; /* <----- change/modifie l’arrondi */
  }

  .content_sortPagiBar .nbrItemPage .selector1:before,
  .content_sortPagiBar .nbrItemPage .selector1:after,
  .content_sortPagiBar .nbrItemPage .selector1 > span:before,
  .content_sortPagiBar .nbrItemPage .selector1 > span:after,
  .content_sortPagiBar .nbrItemPage .selector1 i,
  .content_sortPagiBar .nbrItemPage .selector1 b{
    background: transparent !important; /* <----- change/modifie le fond des décorations */
    box-shadow: none !important; /* <----- change/modifie l’ombre */
  }

  .content_sortPagiBar .nbrItemPage > span{
    display: inline-block !important; /* <----- change/modifie l’affichage */
    margin-left: 6px !important; /* <----- change/modifie l’espace à gauche */
    white-space: nowrap !important; /* <----- change/modifie le wrap */
  }

  .content_sortPagiBar .nbrItemPage br{
    display: none !important; /* <----- change/modifie l’affichage des retours ligne (cachés) */
  }

}

/* =======================================================
   PS 1.6 — TRI + "NB ITEMS PER PAGE" (MOBILE ONLY)
======================================================= */
@media (max-width: 767px){

  .content_sortPagiBar .sortPagiBar{
    display: flex !important; /* <----- change/modifie le layout (flex) */
    flex-direction: column !important; /* <----- change/modifie l’orientation (colonne) */
    align-items: center !important; /* <----- change/modifie le centrage */
    justify-content: center !important; /* <----- change/modifie le centrage */
    gap: 10px !important; /* <----- change/modifie l’espace entre blocs */
    width: 100% !important; /* <----- change/modifie la largeur */
    text-align: center !important; /* <----- change/modifie l’alignement texte */
  }

  .content_sortPagiBar #productsSortForm{
    width: auto !important; /* <----- change/modifie la largeur */
    max-width: 90vw !important; /* <----- change/modifie la largeur max (évite overflow) */
    display: flex !important; /* <----- change/modifie le layout */
    justify-content: center !important; /* <----- change/modifie le centrage */
  }

  .content_sortPagiBar #productsSortForm .selector1{
    width: 100% !important; /* <----- change/modifie la largeur */
    display: inline-flex !important; /* <----- change/modifie l’affichage */
    align-items: center !important; /* <----- change/modifie l’alignement vertical */
    justify-content: center !important; /* <----- change/modifie le centrage */
  }

  .content_sortPagiBar #productsSortForm select{
    width: 100% !important; /* <----- change/modifie la largeur */
    max-width: 90vw !important; /* <----- change/modifie la largeur max */
    box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */
  }

  .content_sortPagiBar .nbrItemPage{
    margin-left: 0 !important; /* <----- change/modifie la marge gauche */
    width: auto !important; /* <----- change/modifie la largeur */
    max-width: 90vw !important; /* <----- change/modifie la largeur max */
    display: flex !important; /* <----- change/modifie le layout */
    justify-content: center !important; /* <----- change/modifie le centrage */
  }

  .content_sortPagiBar .nbrItemPage .selector1{
    display: inline-flex !important; /* <----- change/modifie l’affichage */
    align-items: center !important; /* <----- change/modifie l’alignement vertical */
    white-space: nowrap !important; /* <----- change/modifie le wrap */
    gap: 8px !important; /* <----- change/modifie l’espace */
    justify-content: center !important; /* <----- change/modifie le centrage */
  }

  .content_sortPagiBar .nbrItemPage label{
    display: none !important; /* <----- change/modifie l’affichage du label */
  }

  .content_sortPagiBar .nbrItemPage br{
    display: none !important; /* <----- change/modifie l’affichage des retours ligne */
  }

  .content_sortPagiBar .nbrItemPage select{
    margin: 0 !important; /* <----- change/modifie la marge */
    padding: 0 !important; /* <----- change/modifie le padding */
    height: 24px !important; /* <----- change/modifie la hauteur */
    vertical-align: middle !important; /* <----- change/modifie l’alignement vertical */
  }

  .content_sortPagiBar .nbrItemPage .selector1 > span{
    display: block !important; /* <----- change/modifie l’affichage */
    height: 24px !important; /* <----- change/modifie la hauteur */
    line-height: 24px !important; /* <----- change/modifie l’alignement vertical */
    padding-right: 20px !important; /* <----- change/modifie l’espace pour la flèche */
    text-align: left !important; /* <----- change/modifie l’alignement texte */
    box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */
    text-indent: 0px !important; /* <----- change/modifie l’indentation */

    background: transparent !important; /* <----- change/modifie le fond */
    box-shadow: none !important; /* <----- change/modifie l’ombre */
    border-radius: 0 !important; /* <----- change/modifie l’arrondi */
  }

  .content_sortPagiBar .nbrItemPage .selector1:before,
  .content_sortPagiBar .nbrItemPage .selector1:after,
  .content_sortPagiBar .nbrItemPage .selector1 > span:before,
  .content_sortPagiBar .nbrItemPage .selector1 > span:after{
    background: transparent !important; /* <----- change/modifie le fond décoratif */
    box-shadow: none !important; /* <----- change/modifie l’ombre décorative */
  }

  .content_sortPagiBar .nbrItemPage > span{
    display: inline-block !important; /* <----- change/modifie l’affichage */
    margin-left: 6px !important; /* <----- change/modifie l’espace à gauche */
    white-space: nowrap !important; /* <----- change/modifie le wrap */
  }
}

/* =======================================================
   MOBILE — Hamburger menu (déplacement horizontal + vertical)
======================================================= */
@media (max-width: 767px){

  #iqitmegamenu-horizontal #iqitmegamenu-shower{
    position: relative !important; /* <----- change/modifie le contexte */
    left: -20px !important; /* <----- change/modifie le décalage horizontal du hamburger */
    top: 0px !important; /* <----- change/modifie le décalage vertical du hamburger */
  }

  #iqitmegamenu-horizontal #iqitmegamenu-shower .iqitmegamenu-icon{
    background: transparent !important; /* <----- change/modifie le fond */
    box-shadow: none !important; /* <----- change/modifie l’ombre */
    border-radius: 0 !important; /* <----- change/modifie l’arrondi */
    width: 36px !important; /* <----- change/modifie la largeur du bouton */
    height: 36px !important; /* <----- change/modifie la hauteur du bouton */
    position: relative !important; /* <----- change/modifie le contexte pour ::before */
  }

  #iqitmegamenu-horizontal #iqitmegamenu-shower .iqitmegamenu-icon i{
    opacity: 0 !important; /* <----- change/modifie l’opacité (cache l’icône originale) */
  }

  #iqitmegamenu-horizontal #iqitmegamenu-shower .iqitmegamenu-icon::before{
    content: "" !important; /* <----- change/modifie le contenu (les 3 barres) */
    position: absolute !important; /* <----- change/modifie le positionnement */
    left: 8px !important; /* <----- change/modifie la marge interne gauche */
    right: 8px !important; /* <----- change/modifie la marge interne droite */
    top: 10px !important; /* <----- change/modifie la position verticale des barres */
    height: 2px !important; /* <----- change/modifie l’épaisseur des barres */
    background: #000 !important; /* <----- change/modifie la couleur des barres */
    box-shadow: 0 6px 0 #000, 0 12px 0 #000 !important; /* <----- change/modifie l’écart entre les 3 barres */
  }

  #iqitmegamenu-horizontal #iqitmegamenu-shower span{
    margin-left: 6px !important; /* <----- change/modifie l’espace entre icône et texte */
    font-weight: 800; /* <----- change/modifie le gras du texte */
  }
}


/* =======================================================
   ✅ UNIFORMITÉ GRANDS ÉCRANS (TV / 2K / 4K)
   - limite le “gonflement” sans casser ton responsive
   - ne touche pas mobile
   - ne change pas tes fonctions
======================================================= */

/* 1) Empêche le layout de s'étirer trop large */
@media (min-width: 1400px){
  #page, #wrapper, .columns-container{
    max-width: 1400px !important;   /* <----- change/modifie la largeur max du site sur très grands écrans */
    margin-left: auto !important; /* <----- change/modifie le centrage */
    margin-right: auto !important; /* <----- change/modifie le centrage */
  }
}

/* 2) Empêche les grosses bannières d'être gigantesques */
@media (min-width: 1200px){
  .cms_top .img_content a[href*="220-liquidation"],
  .cms_top .img_content a[href*="220-clearance"]{
    height: 240px !important;       /* <----- change/modifie la hauteur bannière (grands écrans) */
  }

  .cms_top .img_content a[href*="220-liquidation"] > img,
  .cms_top .img_content a[href*="220-clearance"] > img{
    height: 240px !important; /* <----- change/modifie la hauteur image (match conteneur) */
  }
}

/* 3) Rend le menu/ligne plus cohérents quand le site est centré */
@media (min-width: 1400px){
  :root{
    --menu-line-w: 1220px;          /* <----- change/modifie la largeur max de la ligne sous menu (grands écrans) */
    --menu-line-inset: 30px; /* <----- change/modifie les marges latérales de la ligne (grands écrans) */
  }
}


/* =======================================================
   FINAL OVERRIDE — LOGO SIZE = "AVANT TON BLOCK" + TV SAFE
   Objectif:
   - Même taille qu’avant (ta 2e photo) sur PC / écrans normaux
   - Sur TV, le logo ne grossit PAS plus que le reste
======================================================= */

@media (min-width: 768px){

  /* Le wrapper ne doit JAMAIS scaler */
  #header_logo,
  #header_logo a{
    transform: none !important; /* <----- change/modifie le scaling/translation du wrapper logo (désactivé) */
  }

  /* ✅ Taille desktop "comme avant" (ajustée) */
  #header_logo img{
    width: auto !important; /* <----- change/modifie la largeur du logo (auto) */
    height: auto !important; /* <----- change/modifie la hauteur du logo (auto) */

    /* 👇 AVANT: ton rendu correspond beaucoup plus à ~90px qu’à 60px */
    max-height: 140px !important; /* <----- change/modifie la hauteur max du logo (desktop normal) */

    max-width: 100% !important; /* <----- change/modifie la largeur max (sécurité) */
  }

  /* ✅ Même règle en sticky (aucune variation) */
  #iqitmegamenu-horizontal.cbp-sticky ~ #header #header_logo img,
  #iqitmegamenu-horizontal.cbp-sticky #header_logo img{
    max-height: 90px !important; /* <----- change/modifie la hauteur max du logo quand sticky */
  }
}

/* MOBILE: on laisse ton comportement mobile intact */
@media (max-width: 767px){
  #header_logo img{
    max-height: 40px !important; /* <----- change/modifie la hauteur max du logo (mobile) */
    width: auto !important; /* <----- change/modifie la largeur */
    height: auto !important; /* <----- change/modifie la hauteur */
  }
}

/* =======================================================
   DESKTOP — Sticky search collée au HOME (ZERO overlay)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      --home-left-x: -570px; /* <----- change/modifie le décalage du HOME depuis le centre (repère) */
      --home-gap: 2px; /* <----- change/modifie l’espace entre HOME et search sticky */
      --sticky-search-w: 160px; /* <----- change/modifie la largeur du search sticky (desktop) */
      --sticky-h: 45px; /* <----- change/modifie la hauteur du header sticky (desktop) */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky) ul.sf-menu.menu-content{
      position: fixed !important; /* <----- change/modifie le positionnement (fixe au viewport) */
      top: 0 !important; /* <----- change/modifie la position verticale (tout en haut) */

      left: calc(50% + var(--home-left-x) - var(--home-gap) - var(--sticky-search-w)) !important; /* <----- change/modifie la position horizontale (calculée depuis le centre) */
      right: auto !important; /* <----- change/modifie l’ancrage droite */

      height: var(--sticky-h) !important; /* <----- change/modifie la hauteur via variable */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */

      display: inline-flex !important; /* <----- change/modifie l’affichage */
      width: auto !important; /* <----- change/modifie la largeur */
      max-width: none !important; /* <----- change/modifie la largeur max */

      align-items: center !important; /* <----- change/modifie l’alignement vertical */
      justify-content: flex-start !important; /* <----- change/modifie l’alignement horizontal */

      background: transparent !important; /* <----- change/modifie le fond */
      border: none !important; /* <----- change/modifie la bordure */
      box-shadow: none !important; /* <----- change/modifie l’ombre */

      z-index: 80000 !important; /* <----- change/modifie la priorité sticky desktop */
      pointer-events: none !important; /* <----- change/modifie la capture des clics (désactivée sur le wrapper) */

      white-space: nowrap !important; /* <----- change/modifie le wrap */
      overflow: visible !important; /* <----- change/modifie le débordement */
      transform: none !important; /* <----- change/modifie le transform */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky) ul.sf-menu.menu-content::before,
    body:has(#iqitmegamenu-horizontal.cbp-sticky) ul.sf-menu.menu-content::after{
      content: none !important; /* <----- change/modifie le contenu pseudo-élément (supprimé) */
      display: none !important; /* <----- change/modifie l’affichage (supprimé) */
      pointer-events: none !important; /* <----- change/modifie la capture des clics */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li:first-child{
      display: none !important; /* <----- change/modifie l’affichage du label en sticky */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search{
      float: none !important; /* <----- change/modifie le float */
      width: auto !important; /* <----- change/modifie la largeur */
      max-width: none !important; /* <----- change/modifie la largeur max */

      display: inline-flex !important; /* <----- change/modifie l’affichage */
      align-items: center !important; /* <----- change/modifie l’alignement vertical */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */

      pointer-events: auto !important; /* <----- change/modifie la cliquabilité du bloc search */
    }

    /* ✅ IMPORTANT: on NE cache PAS le <p> (sinon l’input disparaît)
       On le transforme en conteneur "shrink" qui n’intercepte rien */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search p{
      display: inline-flex !important; /* <----- change/modifie l’affichage (garde l’input visible) */
      width: auto !important; /* <----- change/modifie la largeur */
      max-width: none !important; /* <----- change/modifie la largeur max */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      height: auto !important; /* <----- change/modifie la hauteur */

      pointer-events: none !important; /* <----- change/modifie la capture des clics (désactivée sur <p>) */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search p::before,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search p::after{
      content: none !important; /* <----- change/modifie le contenu pseudo-élément (supprimé) */
      display: none !important; /* <----- change/modifie l’affichage (supprimé) */
      pointer-events: none !important; /* <----- change/modifie la capture des clics */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search form{
      display: inline-flex !important; /* <----- change/modifie l’affichage */
      align-items: center !important; /* <----- change/modifie l’alignement vertical */
      width: auto !important; /* <----- change/modifie la largeur */
      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content input#search_query_menu{
      width: var(--sticky-search-w) !important; /* <----- change/modifie la largeur via variable */
      max-width: var(--sticky-search-w) !important; /* <----- change/modifie la largeur max via variable */

      height: 30px !important; /* <----- change/modifie la hauteur de l’input sticky */
      line-height: 30px !important; /* <----- change/modifie l’alignement vertical du texte */

      box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */
      margin: 0 !important; /* <----- change/modifie la marge */

      background: rgba(255,255,255,0.78) !important; /* <----- change/modifie le fond (effet verre) */
      border: 2px solid rgba(0,0,0,0.25) !important; /* <----- change/modifie l’épaisseur + couleur bordure */
      border-radius: 6px !important; /* <----- change/modifie l’arrondi */
      box-shadow: none !important; /* <----- change/modifie l’ombre */

      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */
    }
  }
}

/* ======================================================= 
   DESKTOP — Sticky COGWHEEL (CLAMP anti-fuite au zoom)
   - ne change PAS le centrage du menu (fixed hors du flux)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* Repère: centre (50%) + offset */
      --sticky-cog-x: 635px; /* <----- change/modifie la position X du cog (depuis le centre) */
      --sticky-cog-top: -4px; /* <----- change/modifie la position Y du cog (peut monter/descendre) */
      --sticky-cog-hit: 44px; /* <----- change/modifie la zone cliquable (taille du bouton) */

      /* ✅ Micro-move ultra précis (transform, stable au zoom) */
      --sticky-cog-offset-x: -50px;   /* <----- change/modifie micro déplacement X du cog (transform) */
      --sticky-cog-offset-y: 0px;   /* <----- change/modifie micro déplacement Y du cog (transform) */

      /* ✅ Sécurité bord droit (empêche la fuite à 175/200%) */
      --sticky-right-pad: 10px; /* <----- change/modifie la marge sécurité au bord droit */

      /* Dropdown */
      --sticky-cog-drop-y: 5px; /* <----- change/modifie l’écart vertical entre cog et dropdown */
      --sticky-cog-drop-minw: 280px; /* <----- change/modifie la largeur min du dropdown */
      --sticky-cog-drop-maxw: 280px; /* <----- change/modifie la largeur max du dropdown */
      --sticky-cog-drop-pad: 12px 16px; /* <----- change/modifie le padding interne du dropdown */

      /* ✅ Micro-move dropdown */
      --sticky-cog-drop-offset-x: -250px; /* <----- change/modifie micro déplacement X du dropdown */
      --sticky-cog-drop-offset-y: 0px; /* <----- change/modifie micro déplacement Y du dropdown */
    }

    /* 1) Empêche les wrappers de voler les clics */
    body:has(#iqitmegamenu-horizontal.cbp-sticky) #header .header_user{
      pointer-events: none !important; /* <----- change/modifie la capture des clics du wrapper (désactivée) */
    }

    /* 2) Lien cog fixed + clamp */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top{
      position: fixed !important; /* <----- change/modifie le positionnement (fixe au viewport) */
      top: var(--sticky-cog-top) !important; /* <----- change/modifie la position verticale via variable */

      /* ✅ Clamp: ne dépasse jamais le bord droit */
      left: clamp(
        0px,
        calc(50% + var(--sticky-cog-x)),
        calc(100vw - var(--sticky-cog-hit) - var(--sticky-right-pad))
      ) !important; /* <----- change/modifie la position X (clamp anti-débordement) */

      right: auto !important; /* <----- change/modifie l’ancrage droite */

      width: var(--sticky-cog-hit) !important; /* <----- change/modifie la largeur du bouton */
      height: var(--sticky-cog-hit) !important; /* <----- change/modifie la hauteur du bouton */

      display: inline-flex !important; /* <----- change/modifie l’affichage */
      align-items: center !important; /* <----- change/modifie le centrage vertical */
      justify-content: center !important; /* <----- change/modifie le centrage horizontal */

      opacity: 1 !important; /* <----- change/modifie l’opacité */
      visibility: visible !important; /* <----- change/modifie la visibilité */

      z-index: 80010 !important; /* <----- change/modifie la priorité */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */

      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      background: transparent !important; /* <----- change/modifie le fond */

      /* ✅ Micro-move stable au zoom */
      transform: translate(var(--sticky-cog-offset-x), var(--sticky-cog-offset-y)) !important; /* <----- change/modifie micro placement (transform) */
      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur (transform) */
    }

    /* 3) Icône visible */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top i.icon_cog,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top i.icon_cog::before{
      display: inline-block !important; /* <----- change/modifie l’affichage de l’icône */
      visibility: visible !important; /* <----- change/modifie la visibilité */
      opacity: 1 !important; /* <----- change/modifie l’opacité */
    }

    /* 4) Dropdown cog (clamp aussi) */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user .toogle_content,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user .toggle_content{
      position: fixed !important; /* <----- change/modifie le positionnement du dropdown (fixed) */

      top: calc(var(--sticky-cog-top) + var(--sticky-cog-hit) + var(--sticky-cog-drop-y)) !important; /* <----- change/modifie la position sous le cog */

      /* ✅ Clamp pour que le dropdown reste dans l’écran */
      left: clamp(
        0px,
        calc(50% + var(--sticky-cog-x)),
        calc(100vw - var(--sticky-cog-drop-maxw) - var(--sticky-right-pad))
      ) !important; /* <----- change/modifie la position X (anti-débordement) */

      min-width: var(--sticky-cog-drop-minw) !important; /* <----- change/modifie la largeur min */
      max-width: var(--sticky-cog-drop-maxw) !important; /* <----- change/modifie la largeur max */
      padding: var(--sticky-cog-drop-pad) !important; /* <----- change/modifie le padding */
      box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */

      z-index: 999999 !important; /* <----- change/modifie la priorité */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */

      /* centre-ish + micro-move */
      transform: translate(
        calc(-40% + var(--sticky-cog-drop-offset-x)),
        var(--sticky-cog-drop-offset-y)
      ) !important; /* <----- change/modifie micro placement du dropdown (transform) */

      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur (transform) */
    }
  }
}


/* ======================================================= 
   DESKTOP — Sticky CART (CLAMP anti-fuite au zoom)
   - placé à droite du COG
   - ne change PAS le centrage du menu
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ==== COG (référence) ==== */
      --sticky-cog-x: 635px; /* <----- change/modifie repère X du cog */
      --sticky-cog-top: -4px; /* <----- change/modifie repère Y du cog */
      --sticky-cog-hit: 44px; /* <----- change/modifie taille zone clic du cog */

      /* ==== CART ==== */
      --sticky-cart-gap: 4px; /* <----- change/modifie l’espace entre cog et panier */
      --sticky-cart-x: calc(var(--sticky-cog-x) + var(--sticky-cog-hit) + var(--sticky-cart-gap)); /* <----- change/modifie la position X du panier (calculée) */
      --sticky-cart-top: var(--sticky-cog-top); /* <----- change/modifie la position Y du panier (alignée au cog) */
      --sticky-cart-hit: var(--sticky-cog-hit); /* <----- change/modifie la taille zone clic du panier */

      /* ✅ Micro-move stable au zoom */
      --sticky-cart-offset-x: 10px; /* <----- change/modifie micro déplacement X du panier */
      --sticky-cart-offset-y: 2px; /* <----- change/modifie micro déplacement Y du panier */

      /* ✅ Sécurité bord droit */
      --sticky-right-pad: 10px; /* <----- change/modifie la marge sécurité bord droit */

      /* Dropdown cart */
      --sticky-cart-drop-y: 5px; /* <----- change/modifie l’écart vertical dropdown panier */
      --sticky-cart-drop-minw: 320px; /* <----- change/modifie la largeur min dropdown panier */
      --sticky-cart-drop-maxw: 360px; /* <----- change/modifie la largeur max dropdown panier */
      --sticky-cart-drop-pad: 12px 16px; /* <----- change/modifie le padding dropdown panier */

      /* ✅ Micro-move dropdown */
      --sticky-cart-drop-offset-x: 0px; /* <----- change/modifie micro déplacement X dropdown panier */
      --sticky-cart-drop-offset-y: 0px; /* <----- change/modifie micro déplacement Y dropdown panier */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky) #header .shopping_cart{
      pointer-events: none !important; /* <----- change/modifie la capture des clics du wrapper (désactivée) */
    }

    /* Bouton cart fixed + clamp */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart > a,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart a:first-child{
      position: fixed !important; /* <----- change/modifie le positionnement (fixed) */

      top: var(--sticky-cart-top) !important; /* <----- change/modifie la position Y du panier */

      left: clamp(
        0px,
        calc(50% + var(--sticky-cart-x)),
        calc(100vw - var(--sticky-cart-hit) - var(--sticky-right-pad))
      ) !important; /* <----- change/modifie la position X (clamp anti-débordement) */

      right: auto !important; /* <----- change/modifie l’ancrage droite */

      width: var(--sticky-cart-hit) !important; /* <----- change/modifie la largeur zone clic */
      height: var(--sticky-cart-hit) !important; /* <----- change/modifie la hauteur zone clic */

      display: inline-flex !important; /* <----- change/modifie l’affichage */
      align-items: center !important; /* <----- change/modifie le centrage vertical */
      justify-content: center !important; /* <----- change/modifie le centrage horizontal */

      opacity: 1 !important; /* <----- change/modifie l’opacité */
      visibility: visible !important; /* <----- change/modifie la visibilité */

      z-index: 80011 !important; /* <----- change/modifie la priorité */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */

      margin: 0 !important; /* <----- change/modifie la marge */
      padding: 0 !important; /* <----- change/modifie le padding */
      background: transparent !important; /* <----- change/modifie le fond */

      transform: translate(var(--sticky-cart-offset-x), var(--sticky-cart-offset-y)) !important; /* <----- change/modifie micro placement du panier */
      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart i,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart i::before{
      display: inline-block !important; /* <----- change/modifie l’affichage de l’icône panier */
      visibility: visible !important; /* <----- change/modifie la visibilité */
      opacity: 1 !important; /* <----- change/modifie l’opacité */
    }

    /* Dropdown cart (clamp) */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart .toogle_content,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart .toggle_content{
      position: fixed !important; /* <----- change/modifie le positionnement dropdown panier */

      top: calc(var(--sticky-cart-top) + var(--sticky-cart-hit) + var(--sticky-cart-drop-y)) !important; /* <----- change/modifie la position sous l’icône */

      left: clamp(
        0px,
        calc(50% + var(--sticky-cart-x)),
        calc(100vw - var(--sticky-cart-drop-maxw) - var(--sticky-right-pad))
      ) !important; /* <----- change/modifie la position X (anti-débordement) */

      min-width: var(--sticky-cart-drop-minw) !important; /* <----- change/modifie la largeur min */
      max-width: var(--sticky-cart-drop-maxw) !important; /* <----- change/modifie la largeur max */
      padding: var(--sticky-cart-drop-pad) !important; /* <----- change/modifie le padding */
      box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */

      z-index: 999999 !important; /* <----- change/modifie la priorité */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */

      transform: translate(
        calc(-60% + var(--sticky-cart-drop-offset-x)),
        var(--sticky-cart-drop-offset-y)
      ) !important; /* <----- change/modifie micro placement du dropdown panier */

      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur */
    }
  }
}
/* =======================================================
   DESKTOP — STOP “SLIDE INTO PLACE” when sticky
   (kills theme transitions/animations only in sticky state)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top *,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top::before,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top::after,

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart > a,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart > a *,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart > a::before,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart > a::after,

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user{
      transition: none !important; /* <----- change/modifie les transitions (désactivées) */
      animation: none !important; /* <----- change/modifie les animations (désactivées) */
    }

    /* Extra safety: if the theme uses transform transitions */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user a.icon_top,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart > a{
      transition-property: none !important; /* <----- change/modifie les propriétés animées (aucune) */
    }
  }
}
/* =======================================================
   DESKTOP — COG: NO drift when sticky turns OFF
   (reset to normal layout when NOT sticky)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    /* When NOT sticky: restore theme/default positioning */
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .header_user a.icon_top{
      position: static !important;     /* <----- change/modifie le positionnement (revient dans le flux) */
      top: auto !important; /* <----- change/modifie l’offset top (annulé) */
      left: auto !important; /* <----- change/modifie l’offset left (annulé) */
      right: auto !important; /* <----- change/modifie l’offset right (annulé) */
      bottom: auto !important; /* <----- change/modifie l’offset bottom (annulé) */
      transform: none !important;      /* <----- change/modifie le transform (annulé) */
      will-change: auto !important; /* <----- change/modifie l’optimisation navigateur (auto) */
    }

    /* Also reset the dropdown anchor so it doesn’t “snap” weird */
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .header_user .toogle_content,
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .header_user .toggle_content{
      position: absolute !important;   /* <----- change/modifie le positionnement normal du dropdown */
      top: 100% !important; /* <----- change/modifie la position sous l’icône */
      left: auto !important; /* <----- change/modifie l’ancrage gauche */
      right: 0 !important; /* <----- change/modifie l’ancrage droite */
      transform: none !important; /* <----- change/modifie le transform (annulé) */
      will-change: auto !important; /* <----- change/modifie l’optimisation navigateur */
    }

    /* Kill motion both ways (sticky ON and OFF) */
    #header .header_user a.icon_top,
    #header .header_user a.icon_top * ,
    #header .header_user a.icon_top::before,
    #header .header_user a.icon_top::after{
      transition: none !important; /* <----- change/modifie les transitions */
      animation: none !important; /* <----- change/modifie les animations */
    }
  }
}
/* =======================================================
   DESKTOP — CART NON-STICKY: micro-move (pixel perfect)
   - bouge le cart quand le sticky n’est PAS actif
   - ne casse pas ton sticky (qui est dans body:has(...cbp-sticky))
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ✅ Réglages NON-sticky (tout en haut) */
      --cart-top-offset-x: 57px;   /* <----- change/modifie le micro déplacement X du panier (non-sticky) */
      --cart-top-offset-y: 0px;   /* <----- change/modifie le micro déplacement Y du panier (non-sticky) */
    }

    /* ✅ Non-sticky uniquement */
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .shopping_cart > a,
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .shopping_cart a:first-child{
      transform: translate(var(--cart-top-offset-x), var(--cart-top-offset-y)) !important; /* <----- change/modifie la position du panier (transform) */
      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur */

      /* ✅ stop "slide" si le thème anime */
      transition: none !important; /* <----- change/modifie les transitions */
      animation: none !important; /* <----- change/modifie les animations */
    }

    /* Backup: si ton thème bouge plutôt le container */
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .shopping_cart{
      transform: translate(var(--cart-top-offset-x), var(--cart-top-offset-y)) !important; /* <----- change/modifie la position du conteneur panier */
      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur */

      transition: none !important; /* <----- change/modifie les transitions */
      animation: none !important; /* <----- change/modifie les animations */
    }
  }
}
/* =======================================================
   DESKTOP — COG NON-STICKY: micro-move (pixel perfect)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ✅ Réglages cog NON-sticky (tout en haut) */
      --cog-top-offset-x: -50px;   /* <----- change/modifie le micro déplacement X du cog (non-sticky) */
      --cog-top-offset-y: 0px;   /* <----- change/modifie le micro déplacement Y du cog (non-sticky) */
    }

    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .header_user a.icon_top{
      transform: translate(var(--cog-top-offset-x), var(--cog-top-offset-y)) !important; /* <----- change/modifie la position du cog (transform) */
      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur */

      transition: none !important; /* <----- change/modifie les transitions */
      animation: none !important; /* <----- change/modifie les animations */
    }
  }
}
/* =======================================================
   DESKTOP — COG DROPDOWN NON-STICKY: micro-move
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ✅ Réglages dropdown cog NON-sticky */
      --cog-drop-top-offset-x: 150px;  /* <----- change/modifie le micro déplacement X du dropdown cog (non-sticky) */
      --cog-drop-top-offset-y: 10px;  /* <----- change/modifie le micro déplacement Y du dropdown cog (non-sticky) */
    }

    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .header_user .toogle_content,
    body:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .header_user .toggle_content{
      transform: translate(
        var(--cog-drop-top-offset-x),
        var(--cog-drop-top-offset-y)
      ) !important; /* <----- change/modifie la position du dropdown cog (transform) */

      will-change: transform !important; /* <----- change/modifie l’optimisation navigateur */
      transition: none !important; /* <----- change/modifie les transitions */
      animation: none !important; /* <----- change/modifie les animations */
    }
  }
}
/* =======================================================
   DESKTOP — Sticky COG DROPDOWN (NO drift on zoom)
   - locks dropdown to the *viewport*, not to shifting containers
   - uses clamp() + fixed + transform micro-offset
   - kills transitions/animations in sticky state (prevents "slide")
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ---- Anchor = same reference as your sticky cog icon ---- */
      --sticky-cog-x: 635px;      /* <----- change/modifie repère X du cog sticky */
      --sticky-cog-top: -4px;     /* <----- change/modifie repère Y du cog sticky */
      --sticky-cog-hit: 44px;     /* <----- change/modifie taille zone clic du cog sticky */

      /* ---- Screen safety ---- */
      --sticky-right-pad: 10px; /* <----- change/modifie la marge sécurité bord droit */

      /* ---- Dropdown sizing ---- */
      --sticky-cog-drop-y: 5px; /* <----- change/modifie l’écart vertical dropdown */
      --sticky-cog-drop-minw: 280px; /* <----- change/modifie largeur min dropdown */
      --sticky-cog-drop-maxw: 280px; /* <----- change/modifie largeur max dropdown */
      --sticky-cog-drop-pad: 12px 16px; /* <----- change/modifie padding dropdown */

      /* ---- Micro-manage dropdown position (stable on zoom) ---- */
      --sticky-cog-drop-offset-x: -250px; /* <----- change/modifie micro déplacement X dropdown */
      --sticky-cog-drop-offset-y: 0px;    /* <----- change/modifie micro déplacement Y dropdown */
    }

    /* Make sure the dropdown is never "relative to a drifting parent" */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user{
      position: static !important;      /* <----- change/modifie le positionnement du parent (évite ancrage chelou) */
      transform: none !important; /* <----- change/modifie le transform parent */
      will-change: auto !important; /* <----- change/modifie l’optimisation navigateur */
    }

    /* LOCK dropdown to viewport with clamp */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user .toogle_content,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user .toggle_content{
      position: fixed !important; /* <----- change/modifie le positionnement (fixed) */

      /* Always sits right under the cog icon */
      top: calc(var(--sticky-cog-top) + var(--sticky-cog-hit) + var(--sticky-cog-drop-y)) !important; /* <----- change/modifie la position sous l’icône */

      /* Clamp keeps it inside the screen at any zoom level */
      left: clamp(
        0px,
        calc(50% + var(--sticky-cog-x)),
        calc(100vw - var(--sticky-cog-drop-maxw) - var(--sticky-right-pad))
      ) !important; /* <----- change/modifie la position X (anti-débordement) */

      right: auto !important; /* <----- change/modifie l’ancrage droite */

      min-width: var(--sticky-cog-drop-minw) !important; /* <----- change/modifie largeur min */
      max-width: var(--sticky-cog-drop-maxw) !important; /* <----- change/modifie largeur max */
      padding: var(--sticky-cog-drop-pad) !important; /* <----- change/modifie padding */
      box-sizing: border-box !important; /* <----- change/modifie le calcul des tailles */

      z-index: 999999 !important; /* <----- change/modifie la priorité */
      pointer-events: auto !important; /* <----- change/modifie la cliquabilité */

      /* Micro move ONLY via transform (does not drift with zoom) */
      transform: translate(
        calc(30% + var(--sticky-cog-drop-offset-x)),
        var(--sticky-cog-drop-offset-y)
      ) !important; /* <----- change/modifie micro placement (transform) */

      will-change: transform !important; /* <----- change/modifie optimisation navigateur */

      /* Prevent "slide into place" */
      transition: none !important; /* <----- change/modifie transitions */
      animation: none !important; /* <----- change/modifie animations */
    }

    /* Kill transitions on children too (some themes animate inner parts) */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user .toogle_content *,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_user .toggle_content *{
      transition: none !important; /* <----- change/modifie transitions internes */
      animation: none !important; /* <----- change/modifie animations internes */
    }
  }
}

/* =======================================================
   BACK TO TOP — ▲▲ noires uniques (desktop + mobile)
======================================================= */

a.back-top-button.hidden-xs{
  position: fixed !important; /* <----- change/modifie le positionnement du bouton (fixed) */
  left: 18px !important; /* <----- change/modifie la distance du bord gauche */
  bottom: 18px !important; /* <----- change/modifie la distance du bas */

  width: 42px !important; /* <----- change/modifie la largeur du bouton */
  height: 42px !important; /* <----- change/modifie la hauteur du bouton */

  display: inline-flex !important; /* <----- change/modifie l’affichage */
  align-items: center !important; /* <----- change/modifie le centrage vertical */
  justify-content: center !important; /* <----- change/modifie le centrage horizontal */

  border: 2px solid #000 !important; /* <----- change/modifie l’épaisseur + couleur de bordure */
  border-radius: 10px !important; /* <----- change/modifie l’arrondi */

  background: linear-gradient(
    180deg,
    #fff2b6 0%,
    #ffd26a 18%,
    #f4b43a 45%,
    #d88a1f 72%,
    #b86a12 100%
  ) !important; /* <----- change/modifie le dégradé du fond */

  box-shadow: none !important; /* <----- change/modifie l’ombre */

  z-index: 9999999 !important; /* <----- change/modifie la priorité (toujours devant) */
  opacity: 1 !important; /* <----- change/modifie l’opacité */
  visibility: visible !important; /* <----- change/modifie la visibilité */

  transition: none !important; /* <----- change/modifie transitions */
  animation: none !important; /* <----- change/modifie animations */
  filter: none !important; /* <----- change/modifie filtres */

  transform: translateZ(0) !important; /* <----- change/modifie l’accélération GPU */
  backface-visibility: hidden !important; /* <----- change/modifie l’affichage 3D */
  will-change: auto !important; /* <----- change/modifie l’optimisation navigateur */
}

a.back-top-button.hidden-xs.hidden,
a.back-top-button.hidden-xs.is-hidden,
a.back-top-button.hidden-xs.back-top-hidden{
  opacity: 1 !important; /* <----- change/modifie l’opacité même si “hidden” */
  visibility: visible !important; /* <----- change/modifie la visibilité même si “hidden” */
  transition: none !important; /* <----- change/modifie transitions */
  animation: none !important; /* <----- change/modifie animations */
}

a.back-top-button.hidden-xs i,
a.back-top-button.hidden-xs svg,
a.back-top-button.hidden-xs img,
a.back-top-button.hidden-xs::after{
  display: none !important; /* <----- change/modifie l’affichage (purge les icônes du thème) */
  content: none !important; /* <----- change/modifie le contenu pseudo-élément */
  background: none !important; /* <----- change/modifie le fond */
}

a.back-top-button.hidden-xs::before{
  content: "❯❯" !important; /* <----- change/modifie le symbole affiché */
  display: inline-block !important; /* <----- change/modifie l’affichage */
  transform: rotate(-90deg) !important; /* <----- change/modifie l’orientation (pointe vers le haut) */

  font-size: 16px !important; /* <----- change/modifie la taille du symbole */
  font-weight: 900 !important; /* <----- change/modifie l’épaisseur */
  letter-spacing: -2px !important; /* <----- change/modifie l’espacement des chevrons */
  color: #000 !important; /* <----- change/modifie la couleur */
  line-height: 1 !important; /* <----- change/modifie la hauteur de ligne */

  opacity: 1 !important; /* <----- change/modifie l’opacité */
  visibility: visible !important; /* <----- change/modifie la visibilité */

  transition: none !important; /* <----- change/modifie transitions */
  animation: none !important; /* <----- change/modifie animations */
}

/* Hover desktop */
a.back-top-button.hidden-xs:hover{
  background: linear-gradient(
    180deg,
    #fff6c9 0%,
    #ffd97c 18%,
    #f7bf4a 45%,
    #e09524 72%,
    #c87514 100%
  ) !important; /* <----- change/modifie le dégradé au survol */
}

/* =======================================================
   MOBILE — version petite, bas gauche
======================================================= */
@media (max-width: 767px){

  a.back-top-button.hidden-xs{
    display: inline-flex !important; /* <----- change/modifie l’affichage (force visible) */

    width: 34px !important; /* <----- change/modifie la largeur (mobile) */
    height: 34px !important; /* <----- change/modifie la hauteur (mobile) */

    left: 10px !important; /* <----- change/modifie la distance gauche (mobile) */
    bottom: 10px !important; /* <----- change/modifie la distance bas (mobile) */

    border-radius: 8px !important; /* <----- change/modifie l’arrondi (mobile) */

    z-index: 9999999 !important; /* <----- change/modifie la priorité (mobile) */

    opacity: 1 !important; /* <----- change/modifie l’opacité (mobile) */
    visibility: visible !important; /* <----- change/modifie la visibilité (mobile) */

    transition: none !important; /* <----- change/modifie transitions (mobile) */
    animation: none !important; /* <----- change/modifie animations (mobile) */
  }

  a.back-top-button.hidden-xs::before{
    font-size: 11px !important; /* <----- change/modifie la taille du symbole (mobile) */
    letter-spacing: -1.5px !important; /* <----- change/modifie l’espacement (mobile) */

    transition: none !important; /* <----- change/modifie transitions */
    animation: none !important; /* <----- change/modifie animations */
  }
}
/* =======================================================
   ENLARGE / QUICK VIEW — même look que "Back to top"
   - même gradient + bordure + radius
   - garde l’icône "expand" actuelle (flèches opposées)
======================================================= */

/* Le bouton carré en haut à droite (desktop + mobile) */
a.quick-view{
  width: 42px !important;                 /* taille bouton (desktop) */
  height: 42px !important;                /* taille bouton (desktop) */

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 2px solid #000 !important;      /* même bordure que back-to-top */
  border-radius: 10px !important;         /* même forme */
  box-shadow: none !important;

  background: linear-gradient(            /* même gradient */
    180deg,
    #fff2b6 0%,
    #ffd26a 18%,
    #f4b43a 45%,
    #d88a1f 72%,
    #b86a12 100%
  ) !important;

  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;            /* enlève fade / anim du thème */
  animation: none !important;
}

/* Hover (desktop) — même hover que back-to-top */
a.quick-view:hover{
  background: linear-gradient(
    180deg,
    #fff6c9 0%,
    #ffd97c 18%,
    #f7bf4a 45%,
    #e09524 72%,
    #c87514 100%
  ) !important;
}

/* L’icône (garde le "expand" actuel, on force juste la couleur) */
a.quick-view i,
a.quick-view i::before{
  color: #000 !important;                 /* icône noire */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Cas spécifique que tu vois dans l’inspecteur: i.arrow_expand:before */
a.quick-view i.arrow_expand::before{
  color: #000 !important;                 /* garde les flèches, juste noir */
}

/* Mobile — même scaling que ton back-to-top mobile */
@media (max-width: 767px){
  a.quick-view{
    width: 34px !important;               /* taille bouton (mobile) */
    height: 34px !important;              /* taille bouton (mobile) */
    border-radius: 8px !important;        /* même radius mobile */
  }
}
/* =======================================================
   QUICK VIEW — enlever le carré noir derrière le bouton
   (thème: div.btn_container / div.btn-container)
======================================================= */

/* 1) Le wrapper qui met le carré noir */
.product-container .btn_container,
.product-container .btn-container{
  background: transparent !important;   /* <-- enlève le carré noir */
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 10px !important;       /* <-- coins arrondis (même look que doré) */
  overflow: visible !important;         /* (ou hidden si tu veux clipper) */
}

/* 2) Si le thème colore le lien lui-même en noir */
.product-container a.quick-view{
  background-color: transparent !important; /* sécurité */
}

/* 3) Optionnel: si un pseudo-élément fait un fond noir */
.product-container .btn_container::before,
.product-container .btn_container::after,
.product-container .btn-container::before,
.product-container .btn-container::after{
  background: transparent !important;
  box-shadow: none !important;
}
/* =======================================================
   ADD TO CART — même doré que les autres boutons
   (NE CHANGE RIEN d’autre que le background)
======================================================= */

a.exclusive.ajax_add_to_cart_button.btn.btn-default{
  /* même dégradé doré, même sens */
  background: linear-gradient(
    180deg,
    #fff2b6 0%,
    #ffd26a 18%,
    #f4b43a 45%,
    #d88a1f 72%,
    #b86a12 100%
  ) !important;

  background-color: transparent !important; /* sécurité */
}

/* Hover — même logique que tes boutons dorés */
a.exclusive.ajax_add_to_cart_button.btn.btn-default:hover{
  background: linear-gradient(
    180deg,
    #fff6c9 0%,
    #ffd97c 18%,
    #f7bf4a 45%,
    #e09524 72%,
    #c87514 100%
  ) !important;
}

/* Active / focus — aucune autre modif */
a.exclusive.ajax_add_to_cart_button.btn.btn-default:active,
a.exclusive.ajax_add_to_cart_button.btn.btn-default:focus{
  background: linear-gradient(
    180deg,
    #f7e29a 0%,
    #f2c45e 18%,
    #e7a93a 45%,
    #c97c1c 72%,
    #a85f10 100%
  ) !important;
}
/* =======================================================
   LANG (FR/EN) — même bouton doré (ton thème: .extra_language_block)
======================================================= */

/* Le wrapper (au cas où il peint un fond) */
#header .extra_language_block{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Le bouton (le <a>) */
#header .extra_language_block > a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 2px solid #000 !important;
  border-radius: 10px !important;

  background: linear-gradient(
    180deg,
    #fff2b6 0%,
    #ffd26a 18%,
    #f4b43a 45%,
    #d88a1f 72%,
    #b86a12 100%
  ) !important;

  box-shadow: none !important;

  color: #000 !important;
  text-decoration: none !important;

  transition: none !important;
  animation: none !important;

  /* garde tes dimensions actuelles (on ne force pas width/height) */
}

/* Hover */
#header .extra_language_block > a:hover{
  background: linear-gradient(
    180deg,
    #fff6c9 0%,
    #ffd97c 18%,
    #f7bf4a 45%,
    #e09524 72%,
    #c87514 100%
  ) !important;
}

/* Mobile: même arrondi que tes petits boutons */
@media (max-width: 767px){
  #header .extra_language_block > a{
    border-radius: 8px !important;
  }
}
/* =======================================================
   420PANDA — GOLD THEME for ALL standard buttons site-wide
   Covers: a.btn, .btn-default, .button, .exclusive, inputs
   + My Account "Back to home" etc.
======================================================= */

:root{
  --panda-gold-1:#F6D37A;
  --panda-gold-2:#E2A73C;
  --panda-gold-3:#C47B14;
  --panda-border:#000;
  --panda-radius:10px;
}

/* 1) Base: target MOST Prestashop 1.6 buttons */
a.btn,
button.btn,
input.btn,
a.btn.btn-default,
button.btn.btn-default,
input.btn.btn-default,
a.button,
button.button,
input.button,
a.exclusive,
button.exclusive,
input.exclusive,
a.exclusive_large,
button.exclusive_large,
input.exclusive_large,
a.button-small,
button.button-small,
input.button-small,
a.button-medium,
button.button-medium,
input.button-medium{
  background: linear-gradient(180deg,
    var(--panda-gold-1) 0%,
    var(--panda-gold-2) 55%,
    var(--panda-gold-3) 100%) !important;

  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
  text-shadow: none !important;

  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

/* 2) Keep icons/text inside black as well */
a.btn *,
a.button *,
a.exclusive *,
a.exclusive_large *{
  color:#000 !important;
}

/* 3) Hover/Focus/Active states (no theme “fade to grey”) */
a.btn:hover, a.btn:focus, a.btn:active,
button.btn:hover, button.btn:focus, button.btn:active,
input.btn:hover, input.btn:focus, input.btn:active,
a.button:hover, a.button:focus, a.button:active,
a.exclusive:hover, a.exclusive:focus, a.exclusive:active,
a.exclusive_large:hover, a.exclusive_large:focus, a.exclusive_large:active{
  background: linear-gradient(180deg,
    var(--panda-gold-2) 0%,
    var(--panda-gold-1) 45%,
    var(--panda-gold-3) 100%) !important;

  border-color: #000 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 4) Disabled */
a.btn.disabled, a.btn[disabled],
button.btn:disabled,
input.btn:disabled,
a.button.disabled, a.button[disabled],
button.button:disabled,
input.button:disabled{
  filter: grayscale(20%) !important;
  opacity: .75 !important;
  cursor: not-allowed !important;
}

/* 5) SPECIFIC: My Account "Back to home" button (your screenshot) */
#center_column a.btn.btn-default.button.button-small{
  background: linear-gradient(180deg,
    var(--panda-gold-1) 0%,
    var(--panda-gold-2) 55%,
    var(--panda-gold-3) 100%) !important;
  border: 2px solid #000 !important;
  border-radius: var(--panda-radius) !important;
  color:#000 !important;
  box-shadow:none !important;
  }

/* =======================================================
   420PANDA — QUANTITY INPUTS: SAME SHAPE/BORDER AS BUTTONS
   - same radius + black border
   - NO gold gradient
   - stays readable & neutral
   - removes the 2nd grey border/focus ring that disappears on hover
======================================================= */

:root{
  /* fallback au cas où tes variables n’existent pas ici */
  --panda-border: #000;
  --panda-radius: 10px;
}

/* Quantity inputs (ex: .exclusive.multi_product_quantity) */
input[type="number"],
input.multi_product_quantity,
.exclusive.multi_product_quantity,
.product_list input[type="number"],
.product_list input.multi_product_quantity{
  background: #fff !important;                 /* neutre */
  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 700 !important;                /* un peu “button-like” */
  text-align: center !important;

  /* ---- remove all “second borders” / bootstrap inset / focus rings ---- */
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: textfield !important;
  background-clip: padding-box !important;

  transition: none !important;

  padding: 6px 10px !important;
  min-width: 54px !important;
  height: 42px !important;                    /* proche de ton bouton */
  line-height: 1 !important;
}

/* Keep it clean on hover/focus (still not gold) */
input[type="number"]:hover,
input[type="number"]:focus,
input.multi_product_quantity:hover,
input.multi_product_quantity:focus,
.exclusive.multi_product_quantity:hover,
.exclusive.multi_product_quantity:focus,
.product_list input[type="number"]:hover,
.product_list input[type="number"]:focus,
.product_list input.multi_product_quantity:hover,
.product_list input.multi_product_quantity:focus{
  background: #fff !important;
  border-color: #000 !important;

  /* kill any browser/BS focus styling */
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Chrome / Safari focus ring (sometimes applied separately) */
input[type="number"]::-webkit-focus-ring-color{
  color: transparent !important;
}

/* Firefox inner focus */
input[type="number"]::-moz-focus-inner{
  border: 0 !important;
}

/* Bootstrap / PrestaShop sometimes adds this */
input[type="number"].form-control,
input.multi_product_quantity.form-control,
.exclusive.multi_product_quantity.form-control{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Optional: make the little spinner arrows less ugly (varies by browser) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  opacity: 1 !important;
 }

/* =======================================================
   420PANDA — CHECKOUT CONFIRM BUTTON (cashondelivery)
   Cible UNIQUEMENT: le bouton <a class="cash"> dans le checkout
   - applique le thème or
   - enlève tout hover/2e bordure/ombre
======================================================= */

:root{
  --panda-gold-1: #F6D37A;
  --panda-gold-2: #E2A73C;
  --panda-gold-3: #C47B14;

  --panda-border: #000;
  --panda-radius: 10px;
}

/* Le bouton confirmé "cash" (checkout) */
#order-opc .payment_module a.cash,
#order .payment_module a.cash{
  display: block !important;
  width: 100% !important;

  background: linear-gradient(180deg,
    var(--panda-gold-1) 0%,
    var(--panda-gold-2) 55%,
    var(--panda-gold-3) 100%) !important;

  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transition: none !important;

  /* garde une belle hauteur/click area */
  padding: 14px 18px !important;
}

/* Enlève le style interne du thème si le module met un "fond" ou bordure via span/em */
#order-opc .payment_module a.cash *,
#order .payment_module a.cash *{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: #000 !important;
  text-decoration: none !important;
}

/* Pas de "2e bordure" / glow / hover qui change */
#order-opc .payment_module a.cash:hover,
#order-opc .payment_module a.cash:focus,
#order .payment_module a.cash:hover,
#order .payment_module a.cash:focus{
  background: linear-gradient(180deg,
    var(--panda-gold-1) 0%,
    var(--panda-gold-2) 55%,
    var(--panda-gold-3) 100%) !important;

  border-color: #000 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
 }
}


/* =======================================================
   420PANDA — CART +/- ONLY (desktop + mobile)
   - UNIQUEMENT les boutons + et - du panier
   - même ligne (côte à côte)
   - thème or
   - SUPPRESSION TOTALE du carré blanc (fond + bordure)
======================================================= */

:root{
  --panda-gold-1: #F6D37A;
  --panda-gold-2: #E2A73C;
  --panda-gold-3: #C47B14;
  --panda-border: #000;
  --panda-radius: 10px;
}

/* 1) Conteneur → force + et - sur la même ligne */
#order-opc .cart_quantity_button,
#order .cart_quantity_button{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

/* 2) Boutons + et - */
#order-opc a.cart_quantity_down,
#order-opc a.cart_quantity_up,
#order a.cart_quantity_down,
#order a.cart_quantity_up{
  display: inline-flex !important;
  float: none !important;

  align-items: center !important;
  justify-content: center !important;

  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;

  background: linear-gradient(180deg,
    var(--panda-gold-1) 0%,
    var(--panda-gold-2) 55%,
    var(--panda-gold-3) 100%) !important;

  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* 3) SPAN INTERNE → suppression ABSOLUE du carré blanc */
#order-opc a.cart_quantity_down span,
#order-opc a.cart_quantity_up span,
#order a.cart_quantity_down span,
#order a.cart_quantity_up span{
  background: transparent !important;   /* fond */
  border: 0 !important;                 /* bordure */
  outline: 0 !important;                /* focus fantôme */
  box-shadow: none !important;

  color: #000 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* 4) Hover / focus : zéro apparition parasite */
#order-opc a.cart_quantity_down:hover,
#order-opc a.cart_quantity_up:hover,
#order-opc a.cart_quantity_down:focus,
#order-opc a.cart_quantity_up:focus,
#order a.cart_quantity_down:hover,
#order a.cart_quantity_up:hover,
#order a.cart_quantity_down:focus,
#order a.cart_quantity_up:focus{
  background-clip: padding-box !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/* 5) Sécurité ultime : pseudo-éléments */
#order-opc a.cart_quantity_down::before,
#order-opc a.cart_quantity_up::before,
#order-opc a.cart_quantity_down::after,
#order-opc a.cart_quantity_up::after,
#order a.cart_quantity_down::before,
#order a.cart_quantity_up::before,
#order a.cart_quantity_down::after,
#order a.cart_quantity_up::after{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
 }
}
/* =======================================================
   420PANDA — CART +/- HARD CENTER (desktop + mobile)
   - force un centrage parfait même si le thème casse le span
   - ne change pas tes couleurs (juste placement)
======================================================= */

/* 1) Le conteneur: - et + sur la même ligne */
body#order-opc td.cart_quantity .cart_quantity_button,
body#order td.cart_quantity .cart_quantity_button{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--cartpm-gap, 6px) !important;
  white-space: nowrap !important;
}

/* 2) Le bouton (= le carré) devient “boîte” de centrage absolu */
body#order-opc td.cart_quantity a.cart_quantity_down,
body#order-opc td.cart_quantity a.cart_quantity_up,
body#order td.cart_quantity a.cart_quantity_down,
body#order td.cart_quantity a.cart_quantity_up{
  position: relative !important;
  display: inline-block !important; /* plus stable que flex ici */
  float: none !important;

  width: var(--cartpm-btn, 26px) !important;
  height: var(--cartpm-btn, 26px) !important;
  min-width: var(--cartpm-btn, 26px) !important;
  min-height: var(--cartpm-btn, 26px) !important;

  padding: 0 !important;
  margin: 0 !important;

  line-height: 0 !important;
  text-align: left !important;
  overflow: hidden !important;
}

/* 3) Centrage ABSOLU du span (souvent sprite background) */
body#order-opc td.cart_quantity a.cart_quantity_down > span,
body#order-opc td.cart_quantity a.cart_quantity_up > span,
body#order td.cart_quantity a.cart_quantity_down > span,
body#order td.cart_quantity a.cart_quantity_up > span{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  display: block !important;
  float: none !important;

  width: var(--cartpm-icon, 14px) !important;
  height: var(--cartpm-icon, 14px) !important;

  margin: 0 !important;
  padding: 0 !important;

  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;

  line-height: 0 !important;
}

/* 4) Fallback si le thème utilise un <i> / :before au lieu du span */
body#order-opc td.cart_quantity a.cart_quantity_down i,
body#order-opc td.cart_quantity a.cart_quantity_up i,
body#order td.cart_quantity a.cart_quantity_down i,
body#order td.cart_quantity a.cart_quantity_up i{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: var(--cartpm-icon, 14px) !important;
  line-height: 1 !important;
  width: 1em !important;
  height: 1em !important;
}

body#order-opc td.cart_quantity a.cart_quantity_down i:before,
body#order-opc td.cart_quantity a.cart_quantity_up i:before,
body#order td.cart_quantity a.cart_quantity_down i:before,
body#order td.cart_quantity a.cart_quantity_up i:before{
  font-size: var(--cartpm-icon, 14px) !important;
  line-height: 1 !important;
 }
}
/* =======================================================
   420PANDA — CART: PERFECT CENTERING ONLY
   Objectif UNIQUE:
   1) MOBILE: le groupe (- +) parfaitement centré SOUS la boîte quantité
   2) DESKTOP: la boîte quantité parfaitement centrée DANS sa cellule
   (Aucun changement de couleur / taille / thème ici)
======================================================= */

/* --- Cible la cellule Quantity (desktop + mobile) --- */
body#order-opc td.cart_quantity.text-center,
body#order td.cart_quantity.text-center{
  text-align: center !important;
  vertical-align: middle !important;
}

/* --- 1) CENTRER LA BOÎTE QUANTITÉ DANS LA CELLULE (DESKTOP + MOBILE) --- */
/* (empêche les float/align bizarres du thème) */
body#order-opc td.cart_quantity.text-center input.cart_quantity_input,
body#order-opc td.cart_quantity.text-center input[name^="quantity_"],
body#order td.cart_quantity.text-center input.cart_quantity_input,
body#order td.cart_quantity.text-center input[name^="quantity_"]{
  float: none !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- 2) CENTRER LE GROUPE DES BOUTONS (- +) SOUS LA BOÎTE (MOBILE + DESKTOP) --- */
/* On centre le conteneur dans toute la largeur de la cellule */
body#order-opc td.cart_quantity.text-center .cart_quantity_button,
body#order td.cart_quantity.text-center .cart_quantity_button{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;   /* centre horizontalement */
  align-items: center !important;       /* centre verticalement */
  flex-wrap: nowrap !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* On neutralise les floats des liens (- +) qui cassent l’alignement */
body#order-opc td.cart_quantity.text-center .cart_quantity_button a.cart_quantity_down,
body#order-opc td.cart_quantity.text-center .cart_quantity_button a.cart_quantity_up,
body#order td.cart_quantity.text-center .cart_quantity_button a.cart_quantity_down,
body#order td.cart_quantity.text-center .cart_quantity_button a.cart_quantity_up{
  float: none !important;
}

/* Le petit <span> interne ne doit PAS “pousser” le centrage */
body#order-opc td.cart_quantity.text-center .cart_quantity_button a span,
body#order td.cart_quantity.text-center .cart_quantity_button a span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
 }
}

/* =======================================================
   420PANDA — GLOBAL: rien ne sort du viewport (cart summary)
   - Desktop + mobile
   - Scroll interne UNIQUEMENT si ça overflow
======================================================= */

body#order-opc #order-detail-content.table-responsive,
body#order     #order-detail-content.table-responsive{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  overflow-x: auto !important;                 /* ✅ sécurité universelle */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

body#order-opc #cart_summary,
body#order     #cart_summary{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
}

/* Empêche certains éléments de forcer un overflow débile */
body#order-opc #cart_summary img,
body#order     #cart_summary img{
  max-width: 100% !important;
  height: auto !important;
}

/* Optionnel: évite les mots/valeurs qui cassent tout */
body#order-opc #cart_summary th,
body#order-opc #cart_summary td,
body#order     #cart_summary th,
body#order     #cart_summary td{
  word-break: normal !important;
}

/* =======================================================
   420PANDA — INPUTS / SELECTS / CHECKBOX / UNIFORM (NO SIZE/NO POSITION)
   Objectif:
   - AUCUN changement de taille (height/width/min-width/padding/line-height)
   - AUCUN changement de position (transform/translate/margins/left/right/top)
   - On garde seulement:
     • fond blanc
     • bordure noire + radius panda
     • suppression des 2e bordures / focus rings / inset shadows
     • selects restent cliquables + flèche visible (desktop + mobile)
======================================================= */

:root{
  --panda-border: #000;
  --panda-radius: 10px;

  /* Flèche (desktop) — purement visuelle */
  --panda-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* =======================================================
   QUANTITY INPUTS (Prestashop 1.6)
======================================================= */
input[type="number"],
input.multi_product_quantity,
.exclusive.multi_product_quantity,
.product_list input[type="number"],
.product_list input.multi_product_quantity,
#quantity_wanted,
.cart_quantity_input,
#cart_summary input[type="number"],
#cart_summary input.cart_quantity_input{
  background: #fff !important;
  border: 1px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 700 !important;
  text-align: center !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box !important;

  transition: none !important;
}

input[type="number"]:hover,
input[type="number"]:focus,
input.multi_product_quantity:hover,
input.multi_product_quantity:focus,
.exclusive.multi_product_quantity:hover,
.exclusive.multi_product_quantity:focus,
.product_list input[type="number"]:hover,
.product_list input[type="number"]:focus,
.product_list input.multi_product_quantity:hover,
.product_list input.multi_product_quantity:focus,
#quantity_wanted:hover,
#quantity_wanted:focus,
.cart_quantity_input:hover,
.cart_quantity_input:focus{
  background: #fff !important;
  border-color: #000 !important;

  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

input[type="number"]::-webkit-focus-ring-color{ color: transparent !important; }
input[type="number"]::-moz-focus-inner{ border: 0 !important; }

input[type="number"].form-control,
input.multi_product_quantity.form-control,
.exclusive.multi_product_quantity.form-control,
#quantity_wanted.form-control,
.cart_quantity_input.form-control{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  opacity: 1 !important;
}

/* =======================================================
   FORMS — TEXT INPUTS + TEXTAREA
======================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea{
  background: #fff !important;
  border: 1px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 700 !important;
  text-align: left !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box !important;

  transition: none !important;
}

input[type="text"]:hover,
input[type="text"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="tel"]:hover,
input[type="tel"]:focus,
input[type="search"]:hover,
input[type="search"]:focus,
input[type="url"]:hover,
input[type="url"]:focus,
input[type="number"]:hover,
input[type="number"]:focus,
textarea:hover,
textarea:focus{
  background: #fff !important;
  border-color: #000 !important;

  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

input[type="text"]::-webkit-focus-ring-color,
input[type="email"]::-webkit-focus-ring-color,
input[type="password"]::-webkit-focus-ring-color,
input[type="tel"]::-webkit-focus-ring-color,
input[type="search"]::-webkit-focus-ring-color,
input[type="url"]::-webkit-focus-ring-color,
input[type="number"]::-webkit-focus-ring-color,
textarea::-webkit-focus-ring-color{
  color: transparent !important;
}

input[type="text"]::-moz-focus-inner,
input[type="email"]::-moz-focus-inner,
input[type="password"]::-moz-focus-inner,
input[type="tel"]::-moz-focus-inner,
input[type="search"]::-moz-focus-inner,
input[type="url"]::-moz-focus-inner,
input[type="number"]::-moz-focus-inner{
  border: 0 !important;
}

input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="tel"].form-control,
input[type="search"].form-control,
input[type="url"].form-control,
input[type="number"].form-control,
textarea.form-control{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* =======================================================
   SELECTS (native)
   - garde click OK
   - FIX desktop: ajoute une flèche en background-image (si thème supprime la native)
======================================================= */
select,
select.form-control{
  background: #fff !important;
  border: 1px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 700 !important;
  text-align: left !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;

  -webkit-appearance: menulist !important;
  appearance: menulist !important;

  background-clip: padding-box !important;
  transition: none !important;
}

select:hover,
select:focus{
  background: #fff !important;
  border-color: #000 !important;

  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

select::-ms-expand{
  display: block !important;
}

/* ✅ Desktop: flèche visible même si le thème “tue” la flèche native */
@media (min-width: 768px){
  select,
  select.form-control{
    background-image: var(--panda-arrow-svg) !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px 14px !important;
  }
}

/* =======================================================
   CHECKBOX
======================================================= */
input[type="checkbox"]{
  background: #fff !important;
  border: 1px solid var(--panda-border) !important;
  border-radius: 4px !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;

  -webkit-appearance: none !important;
  appearance: none !important;

  background-clip: padding-box !important;
  transition: none !important;
}

input[type="checkbox"]:hover,
input[type="checkbox"]:focus{
  background: #fff !important;
  border-color: #000 !important;

  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

input[type="checkbox"]:checked{
  background: #fff !important;
  border-color: #000 !important;
  box-shadow: inset 0 0 0 3px #000 !important;
}
/* ======================================================= 
   UNIFORM SELECT (Prestashop 1.6) — DESKTOP ARROW FIX (CLICK-SAFE)
   - style seulement
   - FIX: garde le select Uniform en overlay (zone cliquable)
   - flèche visible sur desktop sans bloquer les clics
======================================================= */
div.selector,
div.selector#uniform-days,
div.selector#uniform-months,
div.selector#uniform-years{
  background: #fff !important;
  border: 1px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;

  background-clip: padding-box !important;
  transition: none !important;

  position: relative !important;     /* <----- nécessaire pour :after + overlay select */
  overflow: visible !important;      /* <----- empêche le “clip” de la flèche */
}

/* Le texte affiché par Uniform ne doit JAMAIS bloquer le click */
div.selector span{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;

  color: #000 !important;
  font-weight: 700 !important;

  pointer-events: none !important;   /* ✅ <----- CRUCIAL: laisse passer le click vers le select overlay */
}

/* ✅ Le vrai fix: select Uniform = overlay cliquable pleine taille */
div.selector select{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;

  /* Uniform s’attend à ça: un select transparent au-dessus */
  position: absolute !important;     /* ✅ <----- remet la logique Uniform */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;

  opacity: 0 !important;             /* ✅ <----- garde l’apparence “custom” */
  cursor: pointer !important;
  z-index: 5 !important;             /* ✅ <----- au-dessus du span */
}

/* ✅ Flèche Uniform (desktop) — overlay visuel seulement */
@media (min-width: 768px){
  div.selector:after{
    content: "" !important;
    background-image: var(--panda-arrow-svg) !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;

    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 14px !important;
    height: 14px !important;

    pointer-events: none !important; /* ✅ <----- ne bloque jamais le click */
    z-index: 6 !important;           /* juste au-dessus du select transparent */
  }
}

div.selector:hover,
div.selector:focus,
div.selector:focus-within{
  background: #fff !important;
  border-color: #000 !important;

  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}


/* =======================================================
   420PANDA — FILE INPUT THEME (Uniform + natif)
   - Applique le même thème (bordure noire + radius + fond blanc)
   - NE MODIFIE PAS la taille ni la position (pas de width/height/transform)
   - FIX desktop: force l'affichage du bouton "Choose file" (Uniform span.action)
   - Couvre:
     1) Uniform uploader: #uniform-xxx + span.filename + span.action
     2) File input natif (fallback)
======================================================= */

:root{
  --panda-border: #000;
  --panda-radius: 10px;

  /* Réserve visuelle (desktop) pour éviter que "filename" écrase le bouton.
     Ne change pas la taille du bloc, seulement le comportement de débordement. */
  --panda-file-action-reserve: 150px; /* ajuste si texte FR plus long */
}

/* =======================================================
   1) UNIFORM (PrestaShop 1.6) — wrapper file uploader
   Ex: <div id="uniform-fileUpload" class="uploader">...</div>
======================================================= */
div.uploader,
div.uploader#uniform-fileUpload,
div[id^="uniform-"].uploader{
  background: #fff !important;
  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box !important;

  /* IMPORTANT: pas de width/height/padding/transform ici */
}

/* Zone "filename" (texte "No file selected") */
div.uploader span.filename{
  background: transparent !important;
  border: none !important;

  color: #000 !important;
  font-weight: 700 !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;

  /* FIX desktop: éviter que filename prenne 100% et cache le bouton */
  display: inline-block !important;
  max-width: calc(100% - var(--panda-file-action-reserve)) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Bouton "Choose file" (Uniform -> span.action) */
div.uploader span.action{
  background: #fff !important; /* neutre (pas de gold) */
  border-left: 2px solid var(--panda-border) !important; /* séparation propre */
  color: #000 !important;
  font-weight: 700 !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;

  /* FIX desktop: certains thèmes le cachent */
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hover/focus: propre, pas de glow */
div.uploader:hover,
div.uploader:focus,
div.uploader:focus-within{
  border-color: #000 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}

/* Le vrai input file (invisible chez Uniform) — on évite les effets visuels */
div.uploader input[type="file"]{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}

/* =======================================================
   2) FILE INPUT NATIF (fallback si Uniform n’est pas utilisé)
   (On le stylise au minimum sans casser la taille)
======================================================= */
input[type="file"]{
  background: #fff !important;
  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  color: #000 !important;
  font-weight: 700 !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box !important;
}

/* Bouton natif (Chrome/Edge) — sans toucher dimensions */
input[type="file"]::-webkit-file-upload-button{
  background: #fff !important;
  border: none !important;
  border-right: 2px solid var(--panda-border) !important;
  color: #000 !important;
  font-weight: 700 !important;

  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}
input[type="file"]::file-selector-button{
  background: #fff !important;
  border: none !important;
  border-right: 2px solid var(--panda-border) !important;
  color: #000 !important;
  font-weight: 700 !important;

  box-shadow: none !important;
  outline: none !important;
}
/* =======================================================
   DESKTOP — FR ONLY: micro drift LEFT for sticky search bar
   - FR: décale un peu à gauche
   - EN: revient exactement comme avant
   - CSS-only, no conflict: on ne touche qu’à --home-left-x
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      --fr-search-drift-x: -36px; /* <----- change/modifie: plus négatif = plus à gauche */
    }

    /* FR uniquement (EN = body.lang_en dans ton code) */
    body:not(.lang_en):has(#iqitmegamenu-horizontal.cbp-sticky){
      --home-left-x: calc(-520px + var(--fr-search-drift-x)) !important; /* <----- change/modifie: ancre search un peu plus à gauche en FR */
    }

    /* EN: reset parfait (ton repère original) */
    body.lang_en:has(#iqitmegamenu-horizontal.cbp-sticky){
      --home-left-x: -520px !important; /* <----- change/modifie: remet EXACT la position anglaise */
    }
  }
}
/* =======================================================
   DESKTOP — FR ONLY: micro drift RIGHT for sticky COG + CART
   - FR: décale un peu vers la droite
   - EN: revient exactement comme avant
   - CSS-only, no conflict: on ne touche qu’aux offsets X (micro-move)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      --fr-cog-drift-x: 42px;  /* <----- change/modifie: plus grand = plus à droite (COG) */
      --fr-cart-drift-x: 42px; /* <----- change/modifie: plus grand = plus à droite (CART) */
    }

    /* FR uniquement (EN = body.lang_en dans ton code) */
    body:not(.lang_en):has(#iqitmegamenu-horizontal.cbp-sticky){
      --sticky-cog-offset-x: calc(-155px + var(--fr-cog-drift-x)) !important;   /* <----- change/modifie: décale COG en FR */
      --sticky-cart-offset-x: calc(-102px + var(--fr-cart-drift-x)) !important; /* <----- change/modifie: décale CART en FR */
    }

    /* EN: reset parfait (tes valeurs “avant”) */
    body.lang_en:has(#iqitmegamenu-horizontal.cbp-sticky){
      --sticky-cog-offset-x: -155px !important; /* <----- change/modifie: remet EXACT la position anglaise (COG) */
      --sticky-cart-offset-x: -102px !important; /* <----- change/modifie: remet EXACT la position anglaise (CART) */
    }
  }
}
/* =======================================================
   420PANDA — DESKTOP ONLY — STICKY MAIN MENU: tighter spacing
   Objectif:
   - réduire l’espace ENTRE les catégories (liens du menu principal)
   - UNIQUEMENT en sticky desktop
   - NO conflict: scope max = #iqitmegamenu-horizontal.cbp-sticky
======================================================= */
@media (min-width: 768px){

  :root{
    /* ✅ Réglage principal (le plus fiable): padding des liens */
    --sticky-cat-pad-x: 8px;      /* <----- diminue/augmente l'espace entre catégories */
    --sticky-cat-pad-y: 0px;      /* <----- laisse 0 pour éviter de changer la hauteur */

    /* ✅ Optionnel (si ton UL est flex): micro gap entre <li> */
    --sticky-cat-gap: 0px;        /* <----- mets 0-8px si ton thème ajoute un gap */
  }

  /* 1) Si le menu est en flex, le gap peut créer du spacing */
  #iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul{
    column-gap: var(--sticky-cat-gap) !important; /* <----- réduit l'écart entre items (si applicable) */
  }

  /* 2) Réduit l'espace via le padding horizontal des liens (méthode la plus stable) */
  #iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul > li > a{
    padding-left: var(--sticky-cat-pad-x) !important;  /* <----- espace à gauche du texte */
    padding-right: var(--sticky-cat-pad-x) !important; /* <----- espace à droite du texte */
    padding-top: var(--sticky-cat-pad-y) !important;   /* <----- évite de changer la hauteur */
    padding-bottom: var(--sticky-cat-pad-y) !important;
  }

  /* 3) Sécurité: certains thèmes mettent des marges sur <li> */
  #iqitmegamenu-horizontal.cbp-sticky #cbp-hrmenu > ul > li{
    margin-left: 0 !important;  /* <----- neutralise marges externes */
    margin-right: 0 !important;
  }
}

/* ======================================================= 
   DESKTOP — Sticky search: s’étire vers la DROITE au clic (CSS-only)
   - largeur fermée différente EN / FR
   - largeur ouverte identique
   - ancrage gauche LOCK (collé au HOME)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ===== LARGEUR FERMÉE ===== */
      --sticky-search-w-en: 127px;   /* <----- largeur fermée EN */
      --sticky-search-w-fr: 92px;    /* <----- largeur fermée FR */

      /* ===== LARGEUR OUVERTE ===== */
      --sticky-search-w-open: 2000px;                /* <----- largeur ouverte */
      --sticky-search-w-open-max: min(60vw, 640px); /* <----- limite responsive */

      /* ===== animation ===== */
      --sticky-search-expand-ms: 120ms;
    }

    /* ===== Applique la largeur fermée selon la langue ===== */

    /* EN */
    body.lang_en:has(#iqitmegamenu-horizontal.cbp-sticky){
      --sticky-search-w: var(--sticky-search-w-en);
    }

    /* FR */
    body:not(.lang_en):has(#iqitmegamenu-horizontal.cbp-sticky){
      --sticky-search-w: var(--sticky-search-w-fr);
    }

    /* 1) IMPORTANT: le wrapper ne doit pas couper l’extension */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search p,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search form{
      overflow: visible !important;
    }

    /* 2) ÉTAT FERMÉ (EN ou FR selon la langue) */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content input#search_query_menu{
      width: var(--sticky-search-w) !important;
      max-width: var(--sticky-search-w) !important;
      transform-origin: left center !important;
      transition: width var(--sticky-search-expand-ms) ease,
                  max-width var(--sticky-search-expand-ms) ease !important;
    }

    /* 3) ÉTAT OUVERT (focus / pleine largeur) */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search:focus-within
    input#search_query_menu{
      width: clamp(
        var(--sticky-search-w),
        var(--sticky-search-w-open),
        var(--sticky-search-w-open-max)
      ) !important;
      max-width: clamp(
        var(--sticky-search-w),
        var(--sticky-search-w-open),
        var(--sticky-search-w-open-max)
      ) !important;

      background: #fff !important; /* <----- ✅ enlève la transparence UNIQUEMENT quand la search est ouverte */
    }

    /* 4) Overlap au-dessus des catégories */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search{
      position: relative !important;
      z-index: 80050 !important;
    }
  }
}
/* =======================================================
   DESKTOP — Sticky search: texte "Search/Recherche" EN OVERLAY dans l'input
   - CSS-only (pas de HTML/JS)
   - n'occupe AUCUNE place (pas de shift de layout)
   - ne bloque jamais le clic (pointer-events:none)
   - disparaît au clic/focus (= quand la search s'ouvre/s'étire)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* Réglages du label overlay */
      --sticky-search-label-en: "Search";        /* <----- texte EN */
      --sticky-search-label-fr: "Recherche";     /* <----- texte FR */

      --sticky-search-label-x: 12px;             /* <----- position X du label dans l'input */
      --sticky-search-label-fs: 13px;            /* <----- taille du texte */
      --sticky-search-label-op: 0.62;            /* <----- opacité du label */
      --sticky-search-label-pad: 74px;           /* <----- padding-left ajouté à l'input (fermée) */
      /* NOTE: augmente si "Recherche" touche ton texte saisi, diminue si tu veux plus tight */
    }

    /* 1) Le conteneur sert d’ancre pour l’overlay */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search{
      position: relative !important; /* <----- ancre le ::before */
    }

    /* 2) Le label overlay (au-dessus de l’input, MAIS ne capture aucun clic) */
    body.lang_en:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search::before{
      content: var(--sticky-search-label-en) !important; /* <----- texte EN */
    }
    body:not(.lang_en):has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search::before{
      content: var(--sticky-search-label-fr) !important; /* <----- texte FR */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search::before{
      position: absolute !important;
      left: var(--sticky-search-label-x) !important;  /* <----- X du label */
      top: 50% !important;
      transform: translateY(-50%) !important;

      font-size: var(--sticky-search-label-fs) !important; /* <----- taille */
      font-weight: 800 !important;
      color: rgba(0,0,0,var(--sticky-search-label-op)) !important; /* <----- opacité */
      line-height: 1 !important;

      pointer-events: none !important; /* <----- ✅ ne bloque jamais le clic */
      z-index: 2 !important;           /* <----- au-dessus de l’input */

      white-space: nowrap !important;
      max-width: calc(100% - 18px) !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;

      /* mini anti-jitter */
      will-change: opacity, transform !important;
    }

    /* 3) Quand la search est FERMÉE: on réserve de la place pour le label (sinon il obstrue) */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search:not(:focus-within)
    input#search_query_menu{
      padding-left: var(--sticky-search-label-pad) !important; /* <----- ✅ réserve place au label */
    }

    /* 4) Quand la search est OUVERTE (clic/focus): label disparaît + padding revient normal */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search:focus-within::before{
      opacity: 0 !important; /* <----- ✅ disparaît au clic */
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    ul.sf-menu.menu-content > li.sf-search:focus-within
    input#search_query_menu{
      padding-left: 12px !important; /* <----- padding normal quand on tape */
    }
  }
}
/* =======================================================
   DESKTOP — STICKY LANG (FR/EN) collé À DROITE du CART
   - FR: drift horizontal UNIQUEMENT (+42px)
   - FR: dimensions + scale DÉDIÉES CONSERVÉES
   - AUCUN déplacement vertical spécifique FR
   - actif UNIQUEMENT quand sticky
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      /* ==== RÉFÉRENCE CART ==== */
      --sticky-cog-x: 635px;
      --sticky-cog-hit: 44px;
      --sticky-cart-gap: 2px;
      --sticky-cart-x: calc(var(--sticky-cog-x) + var(--sticky-cog-hit) + var(--sticky-cart-gap));
      --sticky-cart-top: -4px;
      --sticky-cart-hit: 44px;

      /* ==== LANG — BASE (EN) ==== */
      --sticky-lang-gap: 6px;
      --sticky-lang-x: calc(var(--sticky-cart-x) + var(--sticky-cart-hit) + var(--sticky-lang-gap));
      --sticky-lang-top: var(--sticky-cart-top);

      /* Dimensions EN */
      --sticky-lang-hit-w: 86px;
      --sticky-lang-hit-h: 38px;
      --sticky-lang-pad-x: 12px;

      /* Scale EN */
      --sticky-lang-scale: 0.92;

      /* Micro-ajustement GLOBAL (s’applique aux deux langues) */
      --sticky-lang-offset-x: -45px;
      --sticky-lang-offset-y: 6px;

      /* Sécurité écran */
      --sticky-right-pad: 10px;

      /* =========================
         FR — DIMENSIONS + SCALE
         (PAS DE Y / PAS DE TOP FR)
      ========================== */
      --sticky-lang-fr-drift-x: 42px;  /* ✅ drift horizontal FR uniquement */

      --sticky-lang-fr-hit-w: 42px;    /* width FR */
      --sticky-lang-fr-hit-h: 38px;    /* height FR */
      --sticky-lang-fr-pad-x: 12px;    /* padding FR */

      --sticky-lang-fr-scale: 0.92;    /* scale FR (conservé) */
    }

    /* Wrapper ne vole pas les clics */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .extra_language_block{
      pointer-events: none !important;
    }

    /* =========================
       BASE (EN + autres langues)
    ========================== */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .extra_language_block > a{
      position: fixed !important;
      top: var(--sticky-lang-top) !important;

      left: clamp(
        0px,
        calc(50% + var(--sticky-lang-x)),
        calc(100vw - var(--sticky-lang-hit-w) - var(--sticky-right-pad))
      ) !important;

      right: auto !important;

      width: var(--sticky-lang-hit-w) !important;
      height: var(--sticky-lang-hit-h) !important;

      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;

      padding: 0 var(--sticky-lang-pad-x) !important;
      white-space: nowrap !important;

      z-index: 80012 !important;
      pointer-events: auto !important;

      transform:
        translate(var(--sticky-lang-offset-x), var(--sticky-lang-offset-y))
        scale(var(--sticky-lang-scale)) !important;

      transform-origin: center center !important;
      will-change: transform !important;

      transition: none !important;
      animation: none !important;
    }

    /* =========================
       FR UNIQUEMENT
       - drift horizontal +42px
       - dimensions + scale FR
       - AUCUN mouvement vertical ajouté
    ========================== */
    html[lang^="fr"]
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .extra_language_block > a{
      width: var(--sticky-lang-fr-hit-w) !important;
      height: var(--sticky-lang-fr-hit-h) !important;
      padding-left: var(--sticky-lang-fr-pad-x) !important;
      padding-right: var(--sticky-lang-fr-pad-x) !important;

      transform:
        translate(
          calc(var(--sticky-lang-offset-x) + var(--sticky-lang-fr-drift-x)),
          var(--sticky-lang-offset-y)
        )
        scale(var(--sticky-lang-fr-scale)) !important;
    }

  }
}
/* =======================================================
   DESKTOP — STICKY LANG: texte centré VRAIMENT (overlay)
   - FR = "Francais"
   - EN = "Eng"
   - NE TOUCHE PAS à la position (fixed/left/top/transform)
======================================================= */

/* 1) Cache seulement le texte HTML existant (sans toucher position) */
body:has(#iqitmegamenu-horizontal.cbp-sticky)
#header .extra_language_block > a{
  color: transparent !important;    /* cache le texte d'origine */
  text-shadow: none !important;
  overflow: hidden !important;      /* sécurise l’overlay */
}

/* 2) Texte injecté centré dans 100% du bouton */
body:has(#iqitmegamenu-horizontal.cbp-sticky)
#header .extra_language_block > a::after{
  content: "Francais";                   /* EN par défaut */
  position: absolute !important;
  inset: 0 !important;              /* plein bouton */

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #000 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-align: center !important;

  pointer-events: none !important;  /* ne bloque pas le clic */
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) FR uniquement */
html[lang^="fr"]
body:has(#iqitmegamenu-horizontal.cbp-sticky)
#header .extra_language_block > a::after{
  content: "ENG";
}
/* =======================================================
   DESKTOP — STICKY HOME: FR ONLY drift +42px (NO CONFLICT)
   - N'altère PAS --home-left-x (donc ne bouge pas la search)
   - Utilise "translate" (n'écrase pas transform existant)
======================================================= */
@media (min-width: 768px){
  @supports selector(:has(*)) and (translate: 1px){

    :root{
      --home-fr-drift-x: 42px; /* <----- change/modifie: drift FR */
    }

    /* ✅ FR uniquement + sticky */
    html[lang^="fr"]
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    :is(
      #header a.home,
      #header a#home,
      #header a.icon_home,
      #header a.icon-home,
      #header .sf-menu li.home > a,
      #header .sf-menu li.sf-home > a,
      #header ul.sf-menu.menu-content li.home > a,
      #header ul.sf-menu.menu-content li.sf-home > a
    ){
      translate: var(--home-fr-drift-x) 0 !important; /* ✅ drift horizontal ONLY */
    }

    /* ✅ EN (reset safe) */
    html[lang^="en"]
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    :is(
      #header a.home,
      #header a#home,
      #header a.icon_home,
      #header a.icon-home,
      #header .sf-menu li.home > a,
      #header .sf-menu li.sf-home > a,
      #header ul.sf-menu.menu-content li.home > a,
      #header ul.sf-menu.menu-content li.sf-home > a
    ){
      translate: 0 0 !important;
    }
  }
}
/* =======================================================
   420PANDA — PRODUCT PAGE (+ / -) GOLD THEME
   Objectif:
   - Applique le même doré que tes boutons
   - Couvre la page produit + listes produits
   - Ne touche PAS au positionnement global du bloc quantité
======================================================= */

:root{
  --panda-gold-1:#F6D37A;
  --panda-gold-2:#E2A73C;
  --panda-gold-3:#C47B14;
  --panda-border:#000;
  --panda-radius:10px;

  /* Ajuste seulement si tu veux */
  --panda-qty-btn-size: 26px; /* <----- taille des carrés + / - */
}

/* Boutons +/- sur page produit (et souvent aussi en liste) */
a.product_quantity_up,
a.product_quantity_down,
.product_list a.product_quantity_up,
.product_list a.product_quantity_down{
  background: linear-gradient(180deg,
    var(--panda-gold-1) 0%,
    var(--panda-gold-2) 55%,
    var(--panda-gold-3) 100%) !important;

  border: 2px solid var(--panda-border) !important;
  border-radius: var(--panda-radius) !important;

  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;

  width: var(--panda-qty-btn-size) !important;   /* <----- optionnel: taille */
  height: var(--panda-qty-btn-size) !important;  /* <----- optionnel: taille */
  line-height: var(--panda-qty-btn-size) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

/* Le span interne (souvent responsable du “bouton blanc”) */
a.product_quantity_up span,
a.product_quantity_down span,
.product_list a.product_quantity_up span,
.product_list a.product_quantity_down span{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: #000 !important;
  opacity: 1 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Hover/focus: ne redevient pas gris/blanc */
a.product_quantity_up:hover,
a.product_quantity_down:hover,
a.product_quantity_up:focus,
a.product_quantity_down:focus{
  background: linear-gradient(180deg,
    var(--panda-gold-2) 0%,
    var(--panda-gold-1) 45%,
    var(--panda-gold-3) 100%) !important;

  border-color: #000 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* =======================================================
   420PANDA — FIX PLA "AJOUTEZ AU PANIER" (DIV pla_popup)
   D’après ton inspector:
   <div class="pla_matrix_dropdown_block pla_popup"> ... </div>
   => Ce n’est PAS un <a> ni un <button>, donc on cible le DIV.
======================================================= */

:root{
  --panda-pla-g1:#fff2b6;
  --panda-pla-g2:#f4b43a;
  --panda-pla-g3:#b86a12;
  --panda-pla-border:#000;
  --panda-pla-radius:10px;

  --panda-pla-h1:#fff6c9;
  --panda-pla-h2:#f7bf4a;
  --panda-pla-h3:#c87514;
}

/* 1) Le “bouton” PLA est un DIV: on le recolore directement */
.pla_matrix_dropdown_block.pla_popup{
  background-image: linear-gradient(180deg,var(--panda-pla-g1) 0%,var(--panda-pla-g2) 45%,var(--panda-pla-g3) 100%) !important;
  background-color: transparent !important;

  border: 2px solid var(--panda-pla-border) !important;
  border-radius: var(--panda-pla-radius) !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;

  color: #000 !important;

  /* souvent le bleu vient d’un “skin” qui force le style via transition */
  transition: none !important;
}

/* 2) Force le texte à rester noir (au cas où spans internes) */
.pla_matrix_dropdown_block.pla_popup,
.pla_matrix_dropdown_block.pla_popup *{
  color:#000 !important;
  text-shadow:none !important;
}

/* 3) Hover/focus “comme un bouton” */
.pla_matrix_dropdown_block.pla_popup:hover,
.pla_matrix_dropdown_block.pla_popup:focus,
.pla_matrix_dropdown_block.pla_popup:active{
  background-image: linear-gradient(180deg,var(--panda-pla-h1) 0%,var(--panda-pla-h2) 45%,var(--panda-pla-h3) 100%) !important;
  background-color: transparent !important;

  border-color:#000 !important;
  outline:none !important;
  box-shadow:none !important;
}

/* 4) Si le bleu est dessiné par un pseudo-élément (rare mais possible) */
.pla_matrix_dropdown_block.pla_popup::before,
.pla_matrix_dropdown_block.pla_popup::after{
  background: transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

/* =======================================================   
   420PANDA — CART "FILLED" ICON (CSS-only) — ROBUST (NO ANCHOR CHANGE)
   Fix:
   - FORCE default icon by default (empty state)
   - Switch to filled ONLY when real items exist (dl.products dt)
======================================================= */

@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      --panda-filledcart-img: url("https://420panda.ca/img/cms/ezgif-com-animated-gif-maker (1).gif");
      --panda-emptycart-img: url("https://420panda.ca/img/cms/emptycart.png"); /* ✅ NEW */
      --panda-cart-img-size: 3.20em;
      --panda-cart-img-sticky-size: 3.20em;
    }

    /* =======================================================
       0) DEFAULT (EMPTY): force EMPTY cart image
    ======================================================= */
    #header .shopping_cart img#imagedupanier{
      content: var(--panda-emptycart-img) !important; /* ✅ changed line */
      width: var(--panda-cart-img-size) !important;
      height: var(--panda-cart-img-size) !important;
      object-fit: contain !important;
    }

    /* =======================================================
       1) FILLED condition (RELIABLE): real items exist
       PS1.6 dropdown uses: dl.products dt = 1 row per product
    ======================================================= */
    #header .shopping_cart:has(.cart_block dl.products dt) img#imagedupanier,
    #header .shopping_cart:has(.cart_block dl.products > dt) img#imagedupanier,
    #header .shopping_cart:has(.cart_block_list dl.products dt) img#imagedupanier{
      content: var(--panda-filledcart-img) !important;
      width: var(--panda-cart-img-size) !important;
      height: var(--panda-cart-img-size) !important;
      object-fit: contain !important;
    }

    /* =======================================================
       2) Sticky size override (ONLY size)
    ======================================================= */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block dl.products dt) img#imagedupanier,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block dl.products > dt) img#imagedupanier,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block_list dl.products dt) img#imagedupanier{
      width: var(--panda-cart-img-sticky-size) !important;
      height: var(--panda-cart-img-sticky-size) !important;
    }

    /* =======================================================
       3) Hide qty text ONLY when filled (optional)
    ======================================================= */
    #header .shopping_cart:has(.cart_block dl.products dt) .ajax_cart_quantity,
    #header .shopping_cart:has(.cart_block dl.products dt) .ajax_cart_product_txt,
    #header .shopping_cart:has(.cart_block dl.products dt) .ajax_cart_product_txt_s{
      display: none !important;
    }

  }
}

/* =======================================================   
   420PANDA — CART "FILLED" ICON (CSS-only) — ROBUST (NO ANCHOR CHANGE)
   MOBILE CLONE (same logic, same selectors, just mobile media query)
======================================================= */

@media (max-width: 767px){
  @supports selector(:has(*)) {

    :root{
      --panda-filledcart-img: url("https://420panda.ca/img/cms/ezgif-com-animated-gif-maker (1).gif");
      --panda-emptycart-img: url("https://420panda.ca/img/cms/emptycart.png"); /* ✅ NEW */
      --panda-cart-img-size: 3.20em;
      --panda-cart-img-sticky-size: 3.20em;
    }

    /* =======================================================
       0) DEFAULT (EMPTY): force EMPTY cart image
    ======================================================= */
    #header .shopping_cart img#imagedupanier{
      content: var(--panda-emptycart-img) !important; /* ✅ changed line */
      width: var(--panda-cart-img-size) !important;
      height: var(--panda-cart-img-size) !important;
      object-fit: contain !important;
    }

    /* =======================================================
       1) FILLED condition (RELIABLE): real items exist
       PS1.6 dropdown uses: dl.products dt = 1 row per product
    ======================================================= */
    #header .shopping_cart:has(.cart_block dl.products dt) img#imagedupanier,
    #header .shopping_cart:has(.cart_block dl.products > dt) img#imagedupanier,
    #header .shopping_cart:has(.cart_block_list dl.products dt) img#imagedupanier{
      content: var(--panda-filledcart-img) !important;
      width: var(--panda-cart-img-size) !important;
      height: var(--panda-cart-img-size) !important;
      object-fit: contain !important;
    }

    /* =======================================================
       2) Sticky size override (ONLY size)
    ======================================================= */
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block dl.products dt) img#imagedupanier,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block dl.products > dt) img#imagedupanier,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block_list dl.products dt) img#imagedupanier{
      width: var(--panda-cart-img-sticky-size) !important;
      height: var(--panda-cart-img-sticky-size) !important;
    }

    /* =======================================================
       3) Hide qty text ONLY when filled (optional)
    ======================================================= */
    #header .shopping_cart:has(.cart_block dl.products dt) .ajax_cart_quantity,
    #header .shopping_cart:has(.cart_block dl.products dt) .ajax_cart_product_txt,
    #header .shopping_cart:has(.cart_block dl.products dt) .ajax_cart_product_txt_s{
      display: none !important;
    }

  }
}

/* =======================================================
   420PANDA — DESKTOP TOP (NON-STICKY) — X AXIS ONLY (+ PROTECT GAP RIGHT)
   Objectif:
   - Ne PAS changer la largeur par défaut de la search
   - Autoriser une réduction automatique UNIQUEMENT si l’espace manque (zoom)
   - Garder le gap de protection entre search et langue
   - Sticky = 0 impact garanti
======================================================= */

@media (min-width: 768px){

  :root{
    /* ===== POSITION DES ICÔNES ===== */
    --top-lang-x: -30px;  /* 🌐 FR / EN (texte) */
    --top-cog-x:  -5px;    /* ⚙️ Cogwheel */
    --top-cart-x: 40px;   /* 🛒 Panier */
    
    /* ===== PROTECTION ANTI-OVERLAP (ZOOM SEULEMENT) ===== */
    --top-protect-gap: 8px;      /* espace visuel search ↔ langue */
    --top-protect-right: 40px;  /* couloir réservé langue + icônes */
    --top-search-min: 10px;     /* largeur MIN seulement en cas de contrainte */
  }

  /* =======================================================
     0) DÉBLOQUER LES CONTENEURS (sans forcer de largeur)
     -> permet à la search de garder sa taille native
  ======================================================= */
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #block_top_menu ul.sf-menu > li.sf-search form#searchbox > p{
    width: auto !important;
    max-width: none !important;
  }

  /* =======================================================
     1) COULOIR DE PROTECTION (ne change rien tant qu’il y a de la place)
  ======================================================= */
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #block_top_menu ul.sf-menu > li.sf-search{
    max-width: calc(100vw - var(--top-protect-right)) !important;
    padding-inline-end: var(--top-protect-gap) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* =======================================================
     2) INPUT SEARCH — RÉDUCTION UNIQUEMENT SI NÉCESSAIRE
     ❗ aucune largeur par défaut ici
  ======================================================= */
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #header input#search_query_menu{
    min-width: var(--top-search-min) !important; /* agit seulement en contrainte */
    max-width: 90% !important;                  /* ne dépasse jamais son conteneur */
    box-sizing: border-box !important;
  }

  /* =======================================================
     🌐 LANGUE FR / EN
  ======================================================= */
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #header .extra_language_block > a{
    transform: translateX(var(--top-lang-x)) !important;
  }

  /* =======================================================
     ⚙️ COGWHEEL
  ======================================================= */
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #header .header_user_info,
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #header .header_user_info > a{
    transform: translateX(var(--top-cog-x)) !important;
  }

  /* =======================================================
     🛒 PANIER
  ======================================================= */
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #header .shopping_cart,
  html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
  #header .shopping_cart > a{
    transform: translateX(var(--top-cart-x)) !important;
  }
}

/* =======================================================
   DESKTOP — SEARCH INPUT
   - Largeur dynamique selon zoom / espace réel
   - CSS ONLY
   - Aucun impact sticky / position
======================================================= */

@media (min-width: 768px){
  #header input#search_query_menu{
    width: clamp(
      10px,   /* largeur minimale (zoom élevé) */
      10vw,    /* largeur dynamique (réagit au zoom) */
      300px    /* largeur normale max (100% zoom) */
    );
  }
}
@media (min-width: 768px){

/* ======================================================= 
   420PANDA — DESKTOP — CART DROPDOWN (CSS-only, STABLE)
   Fix:
   - Toujours au-dessus du menu (stacking context safe)
   - Ne disparaît pas en allant dans le dropdown (pont invisible + gap=0)
   - COMMANDER = vrai gold (utilise tes variables panda)
   + BRUTE FORCE: footer toujours en bas + largeur 100% sans coupe
   + ✅ FIX: scroll actif quand beaucoup d’items (flex + min-height:0 + overflow-y)
   + ✅ FIX ITEMS: image bien collée / plus d’overlap / X remove visible
======================================================= */

@media (min-width: 768px){

  :root{
    /* ===== Panda gold (reprend ton thème) ===== */
    --panda-gold-1:#F6D37A;
    --panda-gold-2:#E2A73C;
    --panda-gold-3:#C47B14;
    --panda-border:#000;
    --panda-radius:10px;

    /* ===== Dropdown behavior ===== */
    --panda-cartdrop-z: 2147483647; /* topmost */
    --panda-cartdrop-gap: 0px;      /* IMPORTANT: 0 = pas de trou */
    --panda-cartdrop-bridge: 70px;  /* pont invisible plus grand = traverse facile */

    /* ===== Layout sizing ===== */
    --panda-cartdrop-w: 360px;
    --panda-cartdrop-maxh: 72vh;
    --panda-cartdrop-pad: 14px;
    --panda-cartdrop-gap-y: 10px;

    --panda-cartdrop-img: 44px;
    --panda-cart-gap: 12px;
    --panda-cartdrop-font: 13px;

    /* ✅ AJOUT: taille zone X remove (juste visuel) */
    --panda-cartdrop-x: 26px;

    /* =======================================================
       ✅ AJOUT — DÉPLACEMENT PIXEL (COMMANDER)
    ======================================================= */
    --panda-cmd-wrap-x: 17%;
    --panda-cmd-wrap-y: 0px;
    --panda-cmd-btn-x:  0px;
    --panda-cmd-btn-y:  0px;
  }

  /* Base anchor */
  #header .shopping_cart{
    position: relative;
    z-index: var(--panda-cartdrop-z) !important;
  }

  /* Dropdown container (base) */
  #header .shopping_cart .cart_block{
    display: none !important;
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + var(--panda-cartdrop-gap)) !important;
    z-index: var(--panda-cartdrop-z) !important;

    width: var(--panda-cartdrop-w) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: var(--panda-cartdrop-maxh) !important;

    background: #fff !important;
    border: 2px solid var(--panda-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
    font-size: var(--panda-cartdrop-font) !important;

    pointer-events: auto !important;

    /* ✅ layout flex (pour footer bottom + scroll) */
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* open */
  #header .shopping_cart:hover .cart_block,
  #header .shopping_cart .cart_block:hover{
    display: flex !important;
    flex-direction: column !important;
  }

  /* PONT INVISIBLE */
  #header .shopping_cart .cart_block::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(-1 * var(--panda-cartdrop-bridge)) !important;
    height: var(--panda-cartdrop-bridge) !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  #header .shopping_cart .cart_block *{
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  #header,
  #header .header-container,
  #header .header_container,
  #header .clearfix,
  #header .block_right{
    overflow: visible !important;
  }

  /* block_content */
  #header .shopping_cart .cart_block .block_content{
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;

    min-height: 0 !important;
  }

  /* zone produits scroll */
  #header .shopping_cart .cart_block .cart_block_list{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    padding: var(--panda-cartdrop-pad) !important;
    padding-bottom: var(--panda-cartdrop-pad) !important;
    width: 100% !important;
  }

  /* fallback */
  #header .shopping_cart .cart_block #cart_block_list{
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none !important;
  }

  /* séparateurs */
  #header .shopping_cart .cart_block .products dt,
  #header .shopping_cart .cart_block .products dd{
    border-bottom: 1px solid #e5e5e5 !important;
  }

  /* =======================================================
     ✅ FIX ITEMS (Prestashop 1.6 markup):
     dt contient: a.cart-images + div.cart-info + span.remove_link
     -> grid 3 colonnes (img | infos | X)
     -> plus d’overlap, X toujours visible
  ======================================================= */
  #header .shopping_cart .cart_block #cart_block_list dt,
  #header .shopping_cart .cart_block #cart_block_list dt.item,
  #header .shopping_cart .cart_block #cart_block_list dt.first_item,
  #header .shopping_cart .cart_block #cart_block_list dt.last_item{
    display: grid !important;
    grid-template-columns: var(--panda-cartdrop-img) 1fr var(--panda-cartdrop-x) !important;
    column-gap: var(--panda-cart-gap) !important;
    align-items: start !important;

    padding: 10px 0 !important;  /* évite que tout se colle / overlap */
    margin: 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
  }

  /* image = colonne 1 (SANS margin-left négatif = stop overlap) */
  #header .shopping_cart .cart_block #cart_block_list dt > a.cart-images,
  #header .shopping_cart .cart_block #cart_block_list dt.item > a.cart-images,
  #header .shopping_cart .cart_block #cart_block_list dt.first_item > a.cart-images,
  #header .shopping_cart .cart_block #cart_block_list dt.last_item > a.cart-images{
    grid-column: 1 !important;
    display: block !important;
    width: var(--panda-cartdrop-img) !important;
    height: var(--panda-cartdrop-img) !important;
    overflow: hidden !important;
    margin: 0 !important;
    justify-self: start !important;
  }

  #header .shopping_cart .cart_block #cart_block_list dt > a.cart-images img,
  #header .shopping_cart .cart_block #cart_block_list dt.item > a.cart-images img,
  #header .shopping_cart .cart_block #cart_block_list dt.first_item > a.cart-images img,
  #header .shopping_cart .cart_block #cart_block_list dt.last_item > a.cart-images img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* infos = colonne 2, shrink OK */
  #header .shopping_cart .cart_block #cart_block_list dt .cart-info{
    grid-column: 2 !important;
    min-width: 0 !important;          /* IMPORTANT: empêche les chevauchements */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* X remove = colonne 3 (toujours visible) */
  #header .shopping_cart .cart_block #cart_block_list dt span.remove_link,
  #header .shopping_cart .cart_block #cart_block_list dt .remove_link{
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: start !important;
    display: flex !important;
    width: var(--panda-cartdrop-x) !important;
    height: var(--panda-cartdrop-x) !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* lien remove (ajax_cart_block_remove_link) */
  #header .shopping_cart .cart_block #cart_block_list dt a.ajax_cart_block_remove_link,
  #header .shopping_cart .cart_block #cart_block_list dt a.cart_block_remove_link{
    display: inline-flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;

    color: #000 !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    font-size: 22px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* dd neutre */
  #header .shopping_cart .cart_block #cart_block_list dd{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* PRICES */
  #header .shopping_cart .cart_block .cart-prices{
    padding: 0 var(--panda-cartdrop-pad) !important;
    margin: var(--panda-cartdrop-gap-y) 0 0 !important;
    width: 100% !important;
  }
  #header .shopping_cart .cart_block .cart-prices,
  #header .shopping_cart .cart_block .cart-prices *{
    text-align: left !important;
  }

  /* +/- GOLD */
  #header .shopping_cart .cart_block .cart_quantity_up,
  #header .shopping_cart .cart_block .cart_quantity_down{
    background: linear-gradient(180deg,
      var(--panda-gold-1) 0%,
      var(--panda-gold-2) 55%,
      var(--panda-gold-3) 100%) !important;

    border: 2px solid var(--panda-border) !important;
    border-radius: 10px !important;
    color: #000 !important;
    font-weight: 900 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  #header .shopping_cart .cart_block .cart_quantity_up:hover,
  #header .shopping_cart .cart_block .cart_quantity_down:hover{
    background: linear-gradient(180deg,
      var(--panda-gold-2) 0%,
      var(--panda-gold-1) 45%,
      var(--panda-gold-3) 100%) !important;
  }

  /* footer bouton */
  #header .shopping_cart .cart_block p.cart-buttons,
  #header .shopping_cart .cart_block .cart-buttons{
    margin: 0 !important;
    margin-top: auto !important;
    padding: var(--panda-cartdrop-pad) !important;
    width: 75% !important;

    background: #fff !important;
    text-align: center !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    overflow: visible !important;
    clear: both !important;

    position: relative !important;
    transform: translate(var(--panda-cmd-wrap-x), var(--panda-cmd-wrap-y)) !important;
  }

  /* COMMANDER */
  #header .shopping_cart .cart_block .cart-buttons a,
  #header .shopping_cart .cart_block p.cart-buttons > a,
  #header .shopping_cart .cart_block p.cart-buttons > a#button_order_cart,
  #header .shopping_cart .cart_block .cart-buttons > a#button_order_cart{
    float: none !important;
    display: block !important;
    width: 75% !important;
    max-width: 75% !important;
    min-width: 0 !important;

    background: linear-gradient(180deg,
      var(--panda-gold-1) 0%,
      var(--panda-gold-2) 55%,
      var(--panda-gold-3) 100%) !important;

    border: 2px solid var(--panda-border) !important;
    border-radius: var(--panda-radius) !important;

    color: #000 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;

    box-shadow: none !important;
    text-shadow: none !important;

    padding: 14px 18px !important;
    margin: 0 !important;

    box-sizing: border-box !important;
    text-align: center !important;

    position: relative !important;
    transform: translate(var(--panda-cmd-btn-x), var(--panda-cmd-btn-y)) !important;
  }

  #header .shopping_cart .cart_block .cart-buttons a span,
  #header .shopping_cart .cart_block .cart-buttons a em,
  #header .shopping_cart .cart_block p.cart-buttons > a#button_order_cart span,
  #header .shopping_cart .cart_block p.cart-buttons > a#button_order_cart em{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: none !important;
  }

  #header .shopping_cart .cart_block .cart-buttons a:hover{
    background: linear-gradient(180deg,
      var(--panda-gold-2) 0%,
      var(--panda-gold-1) 45%,
      var(--panda-gold-3) 100%) !important;
  }
}

/* =======================================================
   420PANDA — MOVE CART THUMBS (pixel X/Y) — POS_RUBY6 / PS 1.6.1.18
   ...
======================================================= */

@media (min-width: 768px){
  :root{
    --panda-cart-thumb-x: -60px;
    --panda-cart-thumb-y: 0px;
  }

  #header .shopping_cart_header .shopping_cart
  .cart_block .cart_block_list dl.products > dt > a.cart-images > img{
    transform: translate3d(var(--panda-cart-thumb-x), var(--panda-cart-thumb-y), 0) !important;
    will-change: transform !important;
  }

  #header .shopping_cart
  .cart_block .cart_block_list dl.products > dt > a.cart-images > img{
    transform: translate3d(var(--panda-cart-thumb-x), var(--panda-cart-thumb-y), 0) !important;
    will-change: transform !important;
  }
}

/* ======================================================= 
   420PANDA — CART DROPDOWN (STICKY ONLY)
   ...
======================================================= */

@media (min-width: 768px){
  @supports selector(:has(*)) {
    body:has(#iqitmegamenu-horizontal.cbp-sticky){
      --panda-cartdrop-w: 360px;
      --panda-cartdrop-top: 17px;
      --panda-cartdrop-x: -40px;
      --panda-cartdrop-z: 999999;
      --panda-cartdrop-maxh: 72vh;
      --panda-cartdrop-bridge: 55px;
      --panda-cartdrop-gap: 0px;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart{
      position: fixed !important;
      z-index: var(--panda-cartdrop-z) !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart .cart_block.toogle_content.exclusive{
      display: flex !important;
      flex-direction: column !important;

      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;

      position: absolute !important;
      top: var(--panda-cartdrop-top) !important;
      right: calc(0px + var(--panda-cartdrop-x)) !important;
      left: auto !important;

      width: var(--panda-cartdrop-w) !important;
      max-width: calc(100vw - 20px) !important;

      z-index: var(--panda-cartdrop-z) !important;
      transition: opacity .12s linear, visibility .12s linear !important;

      border-radius: 14px !important;
      overflow: hidden !important;
      max-height: var(--panda-cartdrop-maxh) !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .block_content,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart_block_list,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive dl.products,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive dl.products dt,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive dl.products dd,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive a.cart-images,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-info,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .remove_link,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-prices,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-buttons{
      transform: none !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive::before{
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: calc(-1 * var(--panda-cartdrop-bridge)) !important;
      height: var(--panda-cartdrop-bridge) !important;
      background: transparent !important;
      pointer-events: auto !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .block_content{
      display: flex !important;
      flex-direction: column !important;
      min-height: 0 !important;
      flex: 1 1 auto !important;
      overflow: hidden !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart_block_list{
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .block_content{
      position: relative !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive dl.products{
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive dl.products dt{
      display: block !important;
      clear: both !important;
      padding: 10px 12px !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive a.cart-images{
      display: block !important;
      float: left !important;
      width: 80px !important;
      height: 80px !important;
      margin: 0 50px 0 0 !important;
      position: relative !important;
    }
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive a.cart-images img{
      display: block !important;
      width: 80px !important;
      height: 80px !important;
      object-fit: contain !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-info{
      display: block !important;
      overflow: hidden !important;
      position: relative !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .remove_link{
      display: block !important;
      float: right !important;
      margin-left: 10px !important;
      position: relative !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:hover .cart_block.toogle_content.exclusive,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:focus-within .cart_block.toogle_content.exclusive,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart .cart_block.toogle_content.exclusive:hover{
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart::after{
      content: "" !important;
      position: absolute !important;
      right: 0px !important;
      top: 100% !important;
      width: 120px !important;
      height: calc(100px + var(--panda-cartdrop-gap)) !important;
      background: transparent !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .header_container,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header{
      position: relative !important;
      z-index: var(--panda-cartdrop-z) !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .remove_link,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive a.ajax_cart_block_remove_link{
      display: none !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-prices{
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      height: auto !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart_block_shipping_cost,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart_block_tax_cost,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart_block_vouchers{
      display: none !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart_block_total,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .ajax_cart_total,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive #cart_block_total{
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-info .product-atributes,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive .cart-info .quantity-formated{
      display: none !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive dl.products dd{
      display: block !important;
    }

  }
}

@media (min-width: 768px){
  @supports selector(:has(*)) {

    body:has(#iqitmegamenu-horizontal.cbp-sticky){
      --panda-cart-img-shift: -65px;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive a.cart-images{
      margin-right: calc(50px + var(--panda-cart-img-shift)) !important;
      margin-left: 0 !important;
    }

  }
}

@media (min-width: 768px){
  @supports selector(:has(*)) {

    body:has(#iqitmegamenu-horizontal.cbp-sticky){
      --panda-cart-img-x: 50px;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive a.cart-images{
      margin-left: var(--panda-cart-img-x) !important;
    }

  }
}

@media (min-width: 768px){
  @supports selector(:has(*)) {

    #header .shopping_cart > a{
      display: inline-flex !important;
      align-items: center !important;
      line-height: 0 !important;
    }

    #header .shopping_cart img#imagedupanier{
      display: block !important;
      vertical-align: middle !important;
    }

  }
}

@media (min-width: 768px){
  @supports selector(:has(*)) {

    :root{
      --cart-top-empty-x:   -48px;
      --cart-top-empty-y:   -2px;

      --cart-top-filled-x:  -45px;
      --cart-top-filled-y:  -2px;

      --cart-sticky-empty-x:  3px;
      --cart-sticky-empty-y:  0px;

      --cart-sticky-filled-x: 3px;
      --cart-sticky-filled-y: 0px;
    }

    html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .shopping_cart img#imagedupanier{
      transform: translate3d(
        var(--cart-top-empty-x),
        var(--cart-top-empty-y),
        0
      ) !important;
    }

    html:not(:has(#iqitmegamenu-horizontal.cbp-sticky))
    #header .shopping_cart:has(.cart_block dl.products dt) img#imagedupanier{
      transform: translate3d(
        var(--cart-top-filled-x),
        var(--cart-top-filled-y),
        0
      ) !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart img#imagedupanier{
      transform: translate3d(
        var(--cart-sticky-empty-x),
        var(--cart-sticky-empty-y),
        0
      ) !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart:has(.cart_block dl.products dt) img#imagedupanier{
      transform: translate3d(
        var(--cart-sticky-filled-x),
        var(--cart-sticky-filled-y),
        0
      ) !important;
    }
  }
}

@media (min-width: 768px){
  @supports selector(:has(*)) {

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart .ajax_cart_quantity:empty,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart .ajax_cart_quantity:not(:empty){
      display: none !important;
    }
  }
}

@media (min-width: 768px){
  @supports selector(:has(*)) {

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:not(:hover):not(:focus-within)
    .cart_block.toogle_content.exclusive{
      pointer-events: none !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:not(:hover):not(:focus-within)
    .cart_block.toogle_content.exclusive *{
      pointer-events: none !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:hover
    .cart_block.toogle_content.exclusive,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:focus-within
    .cart_block.toogle_content.exclusive,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive:hover{
      pointer-events: auto !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:hover
    .cart_block.toogle_content.exclusive *,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart:focus-within
    .cart_block.toogle_content.exclusive *,
    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart
    .cart_block.toogle_content.exclusive:hover *{
      pointer-events: auto !important;
    }

  }
}

@media (min-width: 768px){
  @supports selector(:has(*)){

    /* ===== BASE (default) ===== */
    body:has(#iqitmegamenu-horizontal.cbp-sticky){
      --panda-bridge-h: 23px;
      --panda-bridge-w: 40px;
      --panda-bridge-x: -55px; /* EN default */
    }

    /* ===== EN ONLY ===== */
    body.lang_en:has(#iqitmegamenu-horizontal.cbp-sticky){
      --panda-bridge-x: -90px;
    }

    /* ===== FR ONLY ===== */
    html[lang^="fr"]
    body:has(#iqitmegamenu-horizontal.cbp-sticky){
      --panda-bridge-x: -50px;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart{
      position: fixed !important;
    }

    body:has(#iqitmegamenu-horizontal.cbp-sticky)
    #header .shopping_cart_header .shopping_cart::after{
      content:"" !important;
      position:absolute !important;
      top:100% !important;
      left: var(--panda-bridge-x) !important;
      width: var(--panda-bridge-w) !important;
      height: var(--panda-bridge-h) !important;
      background: transparent !important;
      outline: transparent !important;
      pointer-events:auto !important;
      z-index: 2147483647 !important;
    }

  }
}

@media (min-width:768px){
  #header .shopping_cart .ajax_cart_quantity,
  #header .shopping_cart .ajax_cart_product_txt,
  #header .shopping_cart .ajax_cart_product_txt_s{
    display:none !important;
  }

  #header .shopping_cart > a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width: 52px !important;
  }
}

} /* ✅ end desktop-only wrapper */

/* Anti-flicker for sticky cart during AJAX refresh */
@media (min-width: 768px){
  #header .shopping_cart_header .shopping_cart,
  #header .shopping_cart_header .shopping_cart *{
    visibility: visible !important;
  }

  /* If theme uses opacity animations / fades */
  #header .shopping_cart_header .shopping_cart{
    opacity: 1 !important;
    transition: none !important;
  }

  /* REPAIR — force Back-to-Top visible/clickable on desktop */
  .back-top,
  a.back-top-button{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: fixed !important;
    left: 20px !important;
    bottom: 20px !important;

    z-index: 2147483646 !important;
    pointer-events: auto !important;
  }
}
@media (min-width: 768px){

  /* When sticky is active, absolutely forbid movement animations */
  body:has(#iqitmegamenu-horizontal.cbp-sticky)
  #header .shopping_cart_header .shopping_cart{
    position: fixed !important;
    left: auto !important;
    bottom: auto !important;

    transform: none !important;
    transition: none !important;
    animation: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;

    z-index: 999999 !important;
    will-change: auto !important;
  }
}
/* ==========================================================
   PRESTASHOP 1.6
   AddToCartAnimation – FIXED MESSAGE POSITION (REAL FIX)
   Correct element: .succesFixedMessageClass
========================================================== */

@media (min-width: 0px){

  body > .succesFixedMessageClass{
    /* FORCE viewport anchoring */
    position: fixed !important;

    /* === POSITION CONTROLS === */
    top: 80px !important;        /* ↓ LOWER (increase = lower) */
    right: 24px !important;      /* ← move left from right edge */
    left: auto !important;
    bottom: auto !important;

    /* OVERRIDE MODULE INLINE + JS */
    transform: none !important;
    transition: none !important;
    animation: none !important;

    /* VISIBILITY SAFETY */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;

    /* STACKING */
    z-index: 999999 !important;

    /* SIZE CONTROL */
    max-width: 520px;
    width: auto;

    box-sizing: border-box;
  }

  /* Inner alert: keep it passive */
  body > .succesFixedMessageClass
  > .succesFixedMessageWindowClass.alert{
    position: relative !important;
    margin: 0 !important;

    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}
/* ==========================================================
   PS 1.6 — AddToCartAnimation fixed message — FORCE position
   Works even if element is not body direct child
========================================================== */

@media (min-width: 0px){

  /* target both spellings (some modules use both) */
  html body .succesFixedMessageClass,
  html body .successFixedMessageClass{
    position: fixed !important;

    /* === YOUR POSITION CONTROLS === */
    top: 60px !important;      /* move DOWN */
    right: 24px !important;    /* move LEFT from the right edge */
    left: auto !important;
    bottom: auto !important;

    /* if JS tries to push it somewhere */
    margin: 0 !important;
    transform: translate3d(0,0,0) !important;

    z-index: 2147483647 !important; /* always on top */
    width: auto !important;
    max-width: 520px !important;

    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body .succesFixedMessageClass .succesFixedMessageWindowClass,
  html body .successFixedMessageClass .successFixedMessageWindowClass{
    margin: 0 !important;
    transform: none !important;
  }
}
/* ==========================================================
   420PANDA — AddToCart MESSAGE
   Exact Add-To-Cart button style + transparency
========================================================== */

@media (min-width: 0px){

  /* OUTER WRAPPER (acts like button frame) */
  html body .succesFixedMessageClass,
  html body .successFixedMessageClass{
    /* Use same gold gradient logic as buttons */
    background: linear-gradient(
      to bottom,
      rgba(255, 215, 120, 0.92) 0%,
      rgba(240, 184, 58, 0.92) 45%,
      rgba(217, 154, 33, 0.92) 100%
    ) !important;

    border: 1px solid rgba(123, 82, 15, 0.9) !important;
    border-radius: 8px !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      0 4px 10px rgba(0,0,0,.35) !important;

    padding: 4px !important;
    backdrop-filter: saturate(120%);
  }

  /* INNER BAR (actual message = button face) */
  html body .succesFixedMessageWindowClass.alert,
  html body .successFixedMessageWindowClass.alert{
    background: linear-gradient(
      to bottom,
      rgba(255, 223, 140, 0.88) 0%,
      rgba(242, 186, 60, 0.88) 50%,
      rgba(214, 148, 26, 0.88) 100%
    ) !important;

    border: 1px solid rgba(155, 107, 22, 0.85) !important;
    border-radius: 6px !important;

    color: #2b1a00 !important;
    font-weight: bold !important;
    font-size: 14px !important;

    text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;

    padding: 10px 38px 10px 14px !important;
    line-height: 1.3 !important;
  }

  /* TEXT + LINK (same as button text) */
  html body .succesFixedMessageWindowClass.alert span,
  html body .successFixedMessageWindowClass.alert span,
  html body .succesFixedMessageWindowClass.alert a,
  html body .successFixedMessageWindowClass.alert a{
    color: #2b1a00 !important;
    font-weight: bold !important;
    text-decoration: none !important;
  }

  /* CLOSE BUTTON — styled like button highlight */
  html body .succesFixedMessageWindowClass.alert .close,
  html body .successFixedMessageWindowClass.alert .close{
    position: absolute;
    top: 6px;
    right: 10px;

    color: #2b1a00 !important;
    opacity: .85 !important;

    font-size: 18px !important;
    font-weight: bold !important;

    text-shadow: 0 1px 0 rgba(255,255,255,.6) !important;
  }

  html body .succesFixedMessageWindowClass.alert .close:hover,
  html body .successFixedMessageWindowClass.alert .close:hover{
    opacity: 1 !important;
    color: #000 !important;
  }
}
/* =======================================================
   420PANDA — MOBILE ONLY — PRECISION NUDGES (COG + CART)
   - Works for empty + filled cart (same element)
   - Separate micro-adjust for EN vs FR
======================================================= */

@media (max-width: 767px){

  /* ===== Default (EN) micro positions ===== */
  html{
    --panda-mob-cart-x: -10px;
    --panda-mob-cart-y: 0px;
  }

  /* ===== FR micro positions ===== */
  html[lang^="fr"]{
    --panda-mob-cart-x: -10px;
    --panda-mob-cart-y: 0px;
  }


  /* CART (empty + filled): nudge the whole cart block without breaking layout */
  #header .shopping_cart_header .shopping_cart{
    position: relative !important;
    transform: translate3d(var(--panda-mob-cart-x), var(--panda-mob-cart-y), 0) !important;
    transition: none !important;
    animation: none !important;
  }
}