/** Shopify CDN: Minification failed

Line 27:21 Expected identifier but found whitespace
Line 27:23 Unexpected "{"
Line 27:33 Expected ":"
Line 27:55 Expected ":"
Line 28:22 Expected identifier but found whitespace
Line 28:24 Unexpected "{"
Line 28:34 Expected ":"
Line 28:64 Expected ":"
Line 31:23 Expected identifier but found whitespace
Line 31:25 Unexpected "{"
... and 5 more hidden warnings

**/
/* ==================================================================
   File: assets/Header.css
   Version: 2.6 (réorganisé — compatible sélecteurs 2.5)
   But: réorganisation, déduplication, lisibilité. Aucun changement visuel voulu.
   ================================================================== */

/* ==================================================================
   0) VARIABLES GLOBALES (Liquid)
   ================================================================== */
:root {
  /* Barre de recherche */
  --search-bar-width: {{ settings.search_bar_width }}px;
  --search-bar-radius: {{ settings.search_bar_border_radius }}px;

  /* Header scroll */
  --header-scrolled-bg: {{ settings.header_scroll_bg_color }};
  --header-scrolled-padding: {{ settings.header_height_scrolled }}px;

  /* Offsets filtres */
  --filters-docked-offset-desktop: 12px;
  --filters-docked-offset-mobile: 6px;
}

/* ==================================================================
   1) HEADER (structure + états)
   ================================================================== */
#site-header {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 1.5rem 2rem; /* symétrie bords */
  background: transparent;
  height: 300px;
  z-index: 1000;
  transition: background-color .3s ease, padding .3s ease;
}
#site-header.header--scrolled {
  background: #fff; /* peut être remplacé par var(--header-scrolled-bg) côté Liquid */
  padding: .75rem 2rem; /* idem var(--header-scrolled-padding) si souhaité */
  height: 135px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
#header-inner { position: relative; }

/* Hauteurs scrolled responsives */
@media (max-width: 767px) {
  #site-header.header--scrolled { height: 107px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #site-header.header--scrolled { height: 128px; }
}

/* Mobile: paddings latéraux alignés */
@media (max-width: 767px) {
  #site-header { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ==================================================================
   2) LOGO CENTRÉ DYNAMIQUE (dans .header-center)
   ================================================================== */
@media (min-width: 768px) {
  #header-inner .header-center #logo {
    position: static !important; left: auto !important; top: auto !important;
    transform: none !important; z-index: 11;
    transition: top .3s, height .3s;
  }
  #site-header:not(.header--scrolled) #header-inner .header-center #logo .logo-img { height: 200px; }
  #site-header.header--scrolled       #header-inner .header-center #logo .logo-img { height: 64px; }
}
@media (max-width: 767px) {
  #header-inner .header-center #logo {
    position: static !important; left: auto !important; top: auto !important;
    transform: none !important;
  }
  #header-inner .header-center #logo .logo-img { transition: height .3s ease; }
}

/* ==================================================================
   3) NAV “PILLS” (header__nav)
   ================================================================== */
.header__nav {
  position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%);
  width: 100%; text-align: center; z-index: 10; transition: bottom .3s ease;
}
/* liste/éléments */
.header__nav ul { display: inline-flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.header__nav .nav-item { list-style: none; }
.header__nav .nav-item a, /* legacy */
.header__nav li a { /* garde compat */
  display: inline-flex; align-items: center; justify-content: center;
  padding: .4rem 2rem; border: 2px solid; border-radius: 999px;
  font-family: "Inter", sans-serif; font-size: 1.5rem;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}

/* États par header scrolled */
#site-header:not(.header--scrolled) .header__nav .nav-item a,
#site-header:not(.header--scrolled) .header__nav li a {
  background: rgba(255,255,255,.35); border-color: rgba(255,255,255,.8); color: #333;
}
#site-header:not(.header--scrolled) .header__nav .nav-item a:hover,
#site-header:not(.header--scrolled) .header__nav .nav-item.is-active a,
#site-header:not(.header--scrolled) .header__nav li a:hover,
#site-header:not(.header--scrolled) .header__nav li.active a {
  background: rgba(255,255,255,.95); border-color: #000; color: #000;
}
#site-header.header--scrolled .header__nav .nav-item a,
#site-header.header--scrolled .header__nav li a {
  background: rgba(255,255,255,.75); border-color: #ccc; color: #333;
}
#site-header.header--scrolled .header__nav .nav-item a:hover,
#site-header.header--scrolled .header__nav .nav-item.is-active a,
#site-header.header--scrolled .header__nav li a:hover,
#site-header.header--scrolled .header__nav li.active a {
  background: #fff; border-color: #000; color: #000;
}

/* Overrides visibilité/position */
#site-header:not(.header--scrolled) .header__nav { bottom: -90px !important; }
@media (min-width: 768px) { #site-header.header--scrolled .header__nav { bottom: -55px !important; } }
@media (max-width: 767px) { #site-header.header--scrolled .header__nav { bottom: -38px !important; } }

/* Mobile: ruban scrollable */
@media (max-width: 767px) {
  .header__nav { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; padding: 0 1rem; }
  .header__nav::-webkit-scrollbar { display: none; }
  .header__nav .nav-item { flex: 0 0 auto; }
  .header__nav .nav-item:first-child { margin-left: 0 !important; }
}

/* Centrage + largeur max desktop */
@media (min-width: 768px) {
  #site-header .header__nav { max-width: var(--ghw); margin-inline: auto; }
  #site-header .header__nav > ul { display: flex; justify-content: center; margin: 0 auto; }
}

/* Overlays filtres dockés dans la zone pills */
.header__nav > .header-filters-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .15s ease; z-index: 3;
}
html.filters-in-header .header__nav > ul { visibility: hidden; }
html.filters-in-header .header__nav > .header-filters-overlay { visibility: visible; opacity: 1; pointer-events: auto; }
html.filters-in-header #site-header .header-filters-slot { display: flex; align-items: center; gap: 12px; min-height: 35px; }
html.filters-in-header #site-header .dp__header__filter-bar { margin: 0; padding: 0; border: 0; height: auto; }
html.filters-in-header #site-header .header-filters-slot .dp__header__filter-bar { transform: translateY(var(--filters-docked-offset-desktop)); }
@media (max-width: 767px) {
  html.filters-in-header #site-header .header-filters-slot .dp__header__filter-bar { transform: translateY(var(--filters-docked-offset-mobile)); }
}


/* ==================================================================
   5) RECHERCHE — Drawer (.search-bar) — (thème)
   ================================================================== */
.search-bar {
  position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%);
  width: 0; overflow: hidden; opacity: 0;
  border: 2px solid #ccc; border-radius: var(--search-bar-radius);
  background: rgba(255,255,255,0.9); padding: .5rem 1rem;
  transition: width .3s ease, opacity .3s ease; z-index: 12;
}
.search-bar.is-open { width: var(--search-bar-width) !important; opacity: 1 !important; }
.search-bar input[type="search"] { width: 100%; border: none; background: transparent; font-size: 1rem; }
.search-bar button { background: transparent; border: none; cursor: pointer; font-size: 1.25rem; }

/* Icône de recherche compacte (dans .header-left -> .link-btn) */
.search-compact { margin-left: 0 !important; }

/* Neutralise les pseudo-pilules sur l’icône search du thème */
#site-header #header-inner .link-btn > a.search-compact::before,
#site-header #header-inner .link-btn > a.search-compact::after { content: none !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
#site-header #header-inner .link-btn > a.search-compact { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--custom_top_main_fg, #000) !important; }
#site-header #header-inner .link-btn > a.search-compact i { font-size: 22px; line-height: 1; color: inherit !important; }
@media (max-width: 767px) { #site-header #header-inner .link-btn > a.search-compact { height: 36px; } }

/* ==================================================================
   6) HAMBURGER (bouton) — styles & overrides
   ================================================================== */
/* Bouton dans le flux */
#header-inner .header-left #hamburger-toggle,
#header-inner .header-left .mobile-menu-toggle {
  position: flex !important; top: auto !important; left: auto !important; transform: none !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  cursor: pointer;
   z-index: 2000 !important; color: #000;
}
/* Transparence globale (thème) */
#hamburger-toggle,
#hamburger-toggle.mobile-menu-toggle,
#hamburger-toggle.mobile-menu-toggle svg,
#hamburger-toggle.mobile-menu-toggle .hamburger-icon { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; appearance: none !important; -webkit-appearance: none !important; }

/* Icône (hérite de currentColor) */

#hamburger-toggle svg.hamburger-icon path { stroke: currentColor; transition: stroke .3s ease; }
/* Barres au repos / à l’ouverture */
#hamburger-toggle.mobile-menu-toggle .hamburger-icon path { stroke: #000 !important; }
#hamburger-toggle.mobile-menu-toggle.is-open .hamburger-icon path,
#hamburger-toggle.is-active svg.hamburger-icon path { stroke: #fff !important; }

/* Neutralise les ::before carrés du thème */
#hamburger-toggle::before, #hamburger-close::before { content: none !important; background: transparent !important; }
#hamburger-toggle, #hamburger-close { background: transparent !important; border: none !important; }

/* Alignements extrêmes */
@media (max-width: 767px) { #hamburger-toggle { margin-left: 1rem !important; } }

/* ==================================================================
   7) DRAWER DU MENU (conteneur)
   ================================================================== */
#hamburger-drawer {
  position: fixed; top: 0; left: 0; width: var(--hamburger-width-mobile) !important; max-width: 100%;
  height: 100vh; background: #fff; box-shadow: 4px 0 12px rgba(0,0,0,.1);
  transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; z-index: 1500;
}
#hamburger-drawer.is-open { transform: translateX(0); }
@media (min-width: 768px)  { #hamburger-drawer { width: var(--hamburger-width-tablet) !important; } }
@media (min-width: 1024px) { #hamburger-drawer { width: var(--hamburger-width-desktop) !important; } }

/* ==================================================================
   8) DRAWER — Contenus & typographies
   ================================================================== */
.drawer-inner { font-family: 'Jost', sans-serif; padding: 1rem; }
.drawer-section { margin-bottom: 1rem; }
.drawer-divider { height: 1px; background: #ccc; margin: 1rem 0; border: none; }
.drawer-link { display: flex; align-items: center; color: inherit; text-decoration: none; font-size: 1rem; margin-bottom: .5rem; }
.logo-after-hash { margin-left: .25rem; width: auto; height: auto; }

/* Section 1: titres & textes */
#hamburger-drawer .drawer-inner { font-family: 'Jost', sans-serif; }
.drawer-section.section-1 h2 {
  margin: 0; font-size: var(--drawer-s1-title-size-mobile) !important; font-weight: var(--drawer-s1-title-weight) !important;
  position: relative; top: var(--drawer-s1-title-offset-mobile) !important; color: #fff !important;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .drawer-section.section-1 h2 { font-size: var(--drawer-s1-title-size-tablet) !important; top: var(--drawer-s1-title-offset-tablet) !important; }
}
@media (min-width: 1024px) {
  .drawer-section.section-1 h2 { font-size: var(--drawer-s1-title-size-desktop) !important; top: var(--drawer-s1-title-offset-desktop) !important; }
}
.drawer-section.section-1 p {
  margin: var(--space-section1-top) 0 var(--space-section1-btn-div1);
  font-size: var(--drawer-s1-text-size-mobile); font-weight: var(--drawer-s1-text-weight);
}
@media (min-width: 768px)  { .drawer-section.section-1 p { font-size: var(--drawer-s1-text-size-tablet); } }
@media (min-width: 1024px) { .drawer-section.section-1 p { font-size: var(--drawer-s1-text-size-desktop); } }
#hamburger-drawer .drawer-section.section-1 p { color: #666 !important; }

/* Boutons login/register */
#login-btn {
  display: block; width: var(--drawer-s1-btn-width-mobile) !important; margin: var(--drawer-s1-btn-offset-mobile) auto 0;
  border-radius: var(--drawer-s1-btn-border-radius) !important; font-family: 'Jost', sans-serif !important;
  font-size: var(--drawer-s1-btn-text-size) !important; font-weight: var(--drawer-s1-btn-text-weight) !important;
  background: #fff !important; border: 2px solid #000 !important; color: #000 !important; text-align: center; cursor: pointer;
}
#register-btn {
  display: block; width: var(--drawer-s1-btn-width-mobile) !important; margin: var(--drawer-s1-btn-offset-mobile) auto 0 !important; padding: .75em 1em;
  font-family: 'Jost', sans-serif !important; font-size: var(--drawer-s1-btn-text-size) !important; font-weight: var(--drawer-s1-btn-text-weight) !important;
  background: #fff !important; border: 2px solid #000 !important; color: #000 !important; text-align: center; cursor: pointer;
  border-radius: var(--drawer-s1-btn-border-radius) !important; transition: transform .1s ease;
}
#register-btn:active { transform: scale(.95); }
@media (min-width: 768px)  { #register-btn, #login-btn { width: var(--drawer-s1-btn-width-tablet) !important; margin: var(--drawer-s1-btn-offset-tablet) auto 0 !important; } }
@media (min-width: 1024px) { #register-btn, #login-btn { width: var(--drawer-s1-btn-width-desktop) !important; margin: var(--drawer-s1-btn-offset-desktop) auto 0 !important; } }

/* Section 2: alignements & gaps */
.drawer-section.section-2 { display: flex; flex-direction: column; gap: 1.5rem !important; }
.drawer-section.section-2 > *:not(.logo-after-hash) { margin: 0 !important; }
.drawer-section.section-2 .logo-hash { margin-left: .25rem; vertical-align: middle; }
.drawer-link-plain { display: block; text-decoration: none; margin-bottom: .75rem; font-size: var(--drawer-s3-text-size,1rem); font-weight: var(--drawer-s3-text-weight,400); }
.drawer-section.section-2 .drawer-link { display: flex; align-items: center; gap: .5rem; }
.drawer-section.section-2 .drawer-icon { width: 1.5em; height: 1.5em; flex-shrink: 0; align-self: center !important; margin: 0 !important; display: flex; align-items: center; justify-content: center; position: relative; top: 0; }
.drawer-section.section-2 .logo-after-hash { height: auto; flex-shrink: 0; margin: 0 !important; margin-top: -.75rem !important; margin-bottom: -.75rem !important; line-height: 0 !important; display: inline-block; }
.drawer-link--planet i { color: currentColor; } .drawer-link--gift i { color: red; } .drawer-link--tag i { color: currentColor; }

/* Sections 3/4/5 sombres */
.drawer-section.section-3, .drawer-section.section-4, .drawer-section.section-5 { background: #000; color: #fff; padding: 1.5rem 1rem; }
.drawer-section.section-3 a, .drawer-section.section-4 a, .drawer-section.section-5 a { color: #fff; }
.drawer-section.section-3 a:hover, .drawer-section.section-4 a:hover, .drawer-section.section-5 a:hover { text-decoration: none; opacity: .85; }
.drawer-section.section-3 hr, .drawer-section.section-4 hr, .drawer-section.section-5 hr, .drawer-separator { border-top: 1px solid #fff !important; }
.drawer-section.section-3 a:hover, .drawer-section.section-3 a:focus, .drawer-section.section-3 a:active,
.drawer-section.section-4 a:hover, .drawer-section.section-4 a:focus, .drawer-section.section-4 a:active,
.drawer-section.section-5 a:hover, .drawer-section.section-5 a:focus, .drawer-section.section-5 a:active { color: red !important; }

/* ==================================================================
   9) LAYOUT BARRE HEADER (desktop) — grille & symétrie
   ================================================================== */
@media (min-width: 768px) {
  /* empêche wrappers du thème de recentrer */
  #site-header #header-outer, #site-header #header { max-width: 100% !important; margin: 0 !important; padding-inline: 0 !important; }

  #site-header #header-inner .header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* gauche | logo | droite */
  align-items: center;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 0;
  column-gap: 14px;
}

/* Forcer le vrai centrage du logo */
#site-header #header-inner .header-center {
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;
}


  /* groupes aux bords */
  #site-header #header-inner .header-left  { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin: 0 !important; }
  #site-header #header-inner .header-right { display: flex; align-items: center; justify-content: flex-end;   gap: 14px; margin: 0 !important; }

  /* icônes extrêmes */
  #hamburger-toggle { margin-left: 0 !important; }
  #nav-user .cart  { margin-right: 0 !important; }

  /* la loupe reste près du hamburger */
  .search-compact { margin-left: 12px !important; }
}

/* Paddings latéraux pilotés par #site-header */
#site-header, #site-header.header--scrolled { padding-left: 2rem; padding-right: 2rem; }

/* ==================================================================
   10) DIVERS (bannières, cartes…)
   ================================================================== */
.banner-hoverable { transition: transform .3s ease, box-shadow .3s ease; cursor: pointer; }
.banner-hoverable:hover { transform: scale(1.02); box-shadow: 0 10px 30px rgba(0,0,0,.1); }





/* ==================================================================
   CHANGELOG 2.6
   - Déplacé toutes les variables en tête
   - Regroupé par composant (Header/Logo/Nav/Search/Hamburger/Drawer/Layout)
   - Dédupliqué transitions (#site-header), overrides hamburger, .search-compact
   - Fusionné styles .header__nav ul/li avec .nav-item a (compat)
   - Conservé tous les sélecteurs existants pour éviter les régressions
   ================================================================== */
/* === ALIGNEMENT GLOBAL ICONES (hamburger, loupe, compte, panier) === */
#header-inner .header-left .link-btn{ margin:0 !important; }                 /* retire la marge du <p> wrapper */

#hamburger-toggle,
#header-inner .link-btn > a.search-compact,
#nav-user > ul > li > a{
  display:flex !important;                                           /* centre exact */
  align-items:center !important;
  justify-content:center;
  width:44px; height:44px;                                                  /* hit-box identiques */
  padding:0 !important;                                                     /* neutralise le .5rem du hamburger */
  line-height:1 !important;
}

#hamburger-toggle svg.hamburger-icon{ width:24px; height:24px; }            /* taille icône harmonisée */
#header-inner .link-btn > a.search-compact i,
#nav-user > ul > li > a i{ font-size:22px; line-height:1; }

@media (max-width:767px){
  #hamburger-toggle,
  #header-inner .link-btn > a.search-compact,
  #nav-user > ul > li > a{ width:36px; height:36px; }
  #hamburger-toggle svg.hamburger-icon{ width:20px; height:20px; }
  #header-inner .link-btn > a.search-compact i,
  #nav-user > ul > li > a i{ font-size:20px; }
}








/* Searchbar inline, cachée par défaut */
#search.searchbar {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 2px solid #ccc;
  border-radius: 4rem;
  padding: 0 .8rem;
  background: rgba(255,255,255,.9);
  transition: max-width .35s ease, opacity .25s ease;
  margin-left: 12px;
}

#search.searchbar.is-open {
  max-width: 400px;  /* largeur affichée */
  opacity: 1;
}

#search.searchbar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  padding: .4rem .6rem;
  outline: none;
}

#search.searchbar button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
}



/* Neutraliser soulignement (pseudo-éléments et bordures) sur icônes du header */
#site-header .header-left a.search-compact,
#site-header #nav-user ul li > a {
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#site-header .header-left a.search-compact::before,
#site-header .header-left a.search-compact::after,
#site-header #nav-user ul li > a::before,
#site-header #nav-user ul li > a::after {
  content: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}