/** 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 6 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; }
}

/* Bandeau gris clair techno chic */
#hamburger-drawer::before {
  content: "";
  position: absolute;
  top: .8rem; left: 1rem; right: 1rem;
  height: 80px;
  background: #f5f5f5;
  border-radius: 16px;
  z-index: 1;
}

/* ==================================================================
   8) DRAWER — Bouton fermer (personnalisé)
   ================================================================== */
/* === Close button uniquement pour le drawer hamburger === */
#hamburger-drawer .drawer-close {
  /* Reset ciblé */
  padding: 0 !important;
  min-width: auto !important;
  max-width: none !important;
  min-height: auto !important;
  max-height: none !important;
  box-shadow: none !important;
  background: #fff !important;

  /* Positionnement */
  position: absolute;
  top: 16px;
  right: 4px;

  /* Cercle parfait */
  width: 30px !important;
  height: 30px !important;
  aspect-ratio: 1/1 !important;   /* sécurité anti-ovale */
  border-radius: 50% !important;
  border: 1px solid #000 !important;

  /* Croix */
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #000 !important;

  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
  z-index: 2001;
}

/* Hover : fond noir, croix reste noire */
#hamburger-drawer .drawer-close:hover {
  background: #fff !important;
  color: #000 !important;
}

/* Active → effet tactile shrink */
#hamburger-drawer .drawer-close:active {
  transform: scale(0.85);
}


/* Neutralise les pseudos injectés par le thème */
#hamburger-drawer .drawer-close::before,
#hamburger-drawer .drawer-close::after {
  content: none !important;
  box-shadow: none !important;
  background: transparent !important;
}




   .drawer-inner {
  font-family: 'Jost', sans-serif;
  padding: 1rem !important;
  position: relative;
  z-index: 2;
}
.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 */
.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: #666 !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);
  color: #666 !important;
}
@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); } }

/* Boutons login/register */
#login-btn,
#openAuthModal,
#register-btn {
  display: block;
  width: var(--drawer-s1-btn-width-mobile);
  margin: var(--drawer-s1-btn-offset-mobile) auto 0;
  border-radius: var(--drawer-s1-btn-border-radius);
  font-family: 'Inter', sans-serif;
  font-size: var(--drawer-s1-btn-text-size);
  font-weight: var(--drawer-s1-btn-text-weight);
  background: #fff;
  border: 2px solid #000;
  color: #000;
  text-align: center;
  cursor: pointer;
  box-shadow: none;              /* 🔥 on neutralise ici */
  transition: transform .1s ease; /* shrink fluide */
}

#login-btn:active,
#register-btn:active {
  transform: scale(.95); /* shrink au clic */
}

@media (min-width: 768px) {
  #login-btn, #register-btn {
    width: var(--drawer-s1-btn-width-tablet) !important;
    margin: var(--drawer-s1-btn-offset-tablet) auto 0 !important;
  }
}
@media (min-width: 1024px) {
  #login-btn, #register-btn {
    width: var(--drawer-s1-btn-width-desktop) !important;
    margin: var(--drawer-s1-btn-offset-desktop) auto 0 !important;
  }
}


/* Neutralise les pseudos du thème qui forcent un fond noir sur le bouton drawer */
#openAuthModal::before,
#openAuthModal::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Style correct du bouton "Se connecter" */
#openAuthModal {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  text-decoration: none !important;
  display: block !important;
  width: var(--drawer-s1-btn-width-mobile) !important;
  margin: var(--drawer-s1-btn-offset-mobile) auto 0 !important;
  border-radius: var(--drawer-s1-btn-border-radius) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--drawer-s1-btn-text-size) !important;
  font-weight: var(--drawer-s1-btn-text-weight) !important;
  box-shadow: none !important;
}








/* ================================================================
   Fond gris global — une seule règle ::after qui va jusqu'en bas
   ================================================================ */
#hamburger-drawer::after{
  content:"";
  position:absolute;
  left: 0; right: 0; bottom: 0;         /* ⇦ jusqu'en bas du drawer */
  top: var(--gray-top, calc(var(--drawer-s1-height,0px) + 30rem));
  background:#f5f5f5;
  z-index: 0;                            /* derrière la carte */
}

/* La section 2 se positionne via variable aussi (plus simple) */
.drawer-section.section-2{
  position: relative; z-index: 2;
  margin-top: var(--sec2-offset, calc(var(--drawer-s1-height,0px) + 1.2rem));
}

/* =========================
   États par défaut (mobile)
   ========================= */
/* Invité (par défaut) */
body:not(.customer-logged-in) #hamburger-drawer{
  --gray-top:   calc(var(--drawer-s1-height, 0px) + 30rem);
  --sec2-offset: calc(var(--drawer-s1-height, 0px) + 1.2rem);
}

/* Invité via classe state-guest (si tu l’utilises) */
#hamburger-drawer.state-guest{
  --gray-top:   calc(var(--drawer-s1-height, 0px) + 30rem) !important;
  --sec2-offset: calc(var(--drawer-s1-height, 0px) + 1.2rem) !important;
}

/* Connecté via classe state-logged */
#hamburger-drawer.state-logged{
  --gray-top:   calc(var(--drawer-s1-height, 0px) + 14.4rem) !important;
  --sec2-offset: calc(var(--drawer-s1-height, 0px) + 5rem) !important;
}

/* =========================
   Tablette
   ========================= */
@media (min-width:768px) and (max-width:1023px){
  body:not(.customer-logged-in) #hamburger-drawer{
    --gray-top:   calc(var(--drawer-s1-height, 0px) + 31rem);
    --sec2-offset: calc(var(--drawer-s1-height, 0px) + 22.2rem);
  }
  #hamburger-drawer.state-guest{
    --gray-top:   calc(var(--drawer-s1-height, 0px) + 31rem) !important;
    --sec2-offset: calc(var(--drawer-s1-height, 0px) + 22.2rem) !important;
  }
  #hamburger-drawer.state-logged{
    --gray-top:   calc(var(--drawer-s1-height, 0px) + 14.4rem) !important;
    --sec2-offset: calc(var(--drawer-s1-height, 0px) + 5.2rem) !important;
  }
}

/* =========================
   Desktop
   ========================= */
@media (min-width:1024px){
  body:not(.customer-logged-in) #hamburger-drawer{
    --gray-top:   calc(var(--drawer-s1-height, 0px) + 31.6rem);
    --sec2-offset: calc(var(--drawer-s1-height, 0px) + 22.6rem);
  }
  #hamburger-drawer.state-guest{
    --gray-top:   calc(var(--drawer-s1-height, 0px) + 31.6rem) !important;
    --sec2-offset: calc(var(--drawer-s1-height, 0px) + 22.6rem) !important;
  }
  #hamburger-drawer.state-logged{
    --gray-top:   calc(var(--drawer-s1-height, 0px) + 14.4rem) !important;
    --sec2-offset: calc(var(--drawer-s1-height, 0px) + 5.2rem) !important;
  }
}


/* ================================================================
   Section 2 : carte blanche sur fond gris
   ================================================================ */
.drawer-section.section-2 {
  position: relative;
  z-index: 2; /* passe devant le fond gris */
  margin-bottom: 1.5rem;
}

.drawer-section.section-2 .drawer-card {
  background: #fff;        /* ✅ carte blanche */
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  margin-left: .15rem;      /* mêmes marges que le pseudo-élément gris de la section 1 */
  margin-right: .15rem;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}








/* ================================================================
   Liens et icônes à l’intérieur de la carte
   ================================================================ */
.drawer-section.section-2 .drawer-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--drawer-s1-text-size-mobile);
  font-weight: 400;
  color: #111;
  text-decoration: none;
  line-height: 1.4;
  padding: .5rem 0;
  transition: color .3s ease, transform .3s ease;
}

.drawer-section.section-2 .drawer-link:hover {
  color: #000;
  transform: translateX(6px);
}

/* Icônes */
.drawer-section.section-2 .drawer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.7em;
  height: 1.7em;
}
.drawer-section.section-2 .drawer-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.8;
  color: #555;
  transition: color .3s ease, transform .3s ease;
}
.drawer-section.section-2 .drawer-link:hover .drawer-icon svg {
  color: #000;
  transform: scale(1.15);
}

/* Cadeau rouge premium */
.drawer-section.section-2 .drawer-link--gift .drawer-icon svg {
  color: #e60023;
}

/* Bloc texte + logo */
.drawer-section.section-2 .drawer-label {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  white-space: nowrap;
  line-height: 1.2;
}
.drawer-section.section-2 .logo-inline {
  display: inline-flex;
  align-items: center;
  margin-left: .25em;
}
.drawer-section.section-2 .logo-inline img,
.drawer-section.section-2 .logo-inline-img {
  height: 1em !important;
  width: auto !important;
  vertical-align: middle;
  line-height: 1;
  max-width: 5em;
  transform: scale(3.5);
  transform-origin: left center;
}

/* ================================================================
   Responsive (textes)
   ================================================================ */
@media (min-width: 768px) {
  .drawer-section.section-2 .drawer-link {
    font-size: var(--drawer-s1-text-size-tablet);
  }
}
@media (min-width: 1024px) {
  .drawer-section.section-2 .drawer-link {
    font-size: var(--drawer-s1-text-size-desktop);
  }
}

/* ===========================
   Section 2 — icônes + poids
   =========================== */
:root{
  /* tailles d’icônes (container) */
  --sec2-icon-size-m: 1.6rem;  /* avant 1.35rem */
  --sec2-icon-size-t: 1.85rem; /* avant 1.5rem  */
  --sec2-icon-size-d: 2rem;    /* avant 1.65rem */

  /* épaisseur de trait (stroke) */
  --sec2-icon-stroke: 1.2;         /* avant ~1.8 : plus fin */
  --sec2-icon-stroke-hover: 1.3;   /* léger renfort au hover */
}

/* Container d’icône plus petit */
.drawer-section.section-2 .drawer-icon{
  width: var(--sec2-icon-size-m);
  height: var(--sec2-icon-size-m);
}

/* SVG à 100% du container */
.drawer-section.section-2 .drawer-icon svg{
  width: 100%;
  height: 100%;
}

/* Poids/épaisseur des traits (cible tous les éléments vectoriels) */
.drawer-section.section-2 .drawer-icon svg path,
.drawer-section.section-2 .drawer-icon svg line,
.drawer-section.section-2 .drawer-icon svg polyline,
.drawer-section.section-2 .drawer-icon svg circle,
.drawer-section.section-2 .drawer-icon svg rect,
.drawer-section.section-2 .drawer-icon svg polygon {
  stroke-width: var(--sec2-icon-stroke) !important;
}

/* Hover : très léger scale + trait un poil plus fort */
.drawer-section.section-2 .drawer-link:hover .drawer-icon svg{
  transform: scale(1.1);
}
.drawer-section.section-2 .drawer-link:hover .drawer-icon svg path,
.drawer-section.section-2 .drawer-link:hover .drawer-icon svg line,
.drawer-section.section-2 .drawer-link:hover .drawer-icon svg polyline,
.drawer-section.section-2 .drawer-link:hover .drawer-icon svg circle,
.drawer-section.section-2 .drawer-link:hover .drawer-icon svg rect,
.drawer-section.section-2 .drawer-link:hover .drawer-icon svg polygon{
  stroke-width: var(--sec2-icon-stroke-hover) !important;
}

/* Espacement un peu réduit entre icône et texte */
.drawer-section.section-2 .drawer-link{
  gap: .65rem;
}

/* Responsif : tablette */
@media (min-width: 768px){
  .drawer-section.section-2 .drawer-icon{
    width: var(--sec2-icon-size-t);
    height: var(--sec2-icon-size-t);
  }
}

/* Responsif : desktop */
@media (min-width: 1024px){
  .drawer-section.section-2 .drawer-icon{
    width: var(--sec2-icon-size-d);
    height: var(--sec2-icon-size-d);
  }
}





/* Titres hors cartes : bordure fine alignée au FOND GRIS */
#hamburger-drawer h3.drawer-section-title{
  all: unset;
  display: block !important;
  position: relative !important;
  z-index: 4 !important;

  /* mêmes bords que le fond gris et les cartes (.15rem) */
  margin: .75rem .15rem .5rem .15rem !important;
  padding: .85rem 1rem !important;

  background: transparent !important;
  border: 1.5px solid #dcdcdc !important;  /* bordure fine */
  border-radius: 12px !important;        /* doux, à l'intérieur du fond gris */

  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  line-height: 1.2 !important;
  color: #666 !important;
}

/* petit espace entre le titre et la carte qui suit */
#hamburger-drawer h3.drawer-section-title + .drawer-section{
  margin-top: .35rem !important;
}

@media (min-width:768px){
  #hamburger-drawer h3.drawer-section-title{ font-size:1.5rem !important; }
}
@media (min-width:1024px){
  #hamburger-drawer h3.drawer-section-title{ font-size:1.5rem !important; }
}







/* Sections 3, 4, 5 (style sombre) */
.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;
  color: red !important;
}
.drawer-section.section-3 hr,
.drawer-section.section-4 hr,
.drawer-section.section-5 hr,
.drawer-separator {
  border-top: 1px solid #fff !important;
}




/* Section 5 : taille synchronisée avec section 1 */
.drawer-section.section-5 .drawer-link {
  font-size: var(--drawer-s1-text-size-mobile);
}

@media (min-width: 768px) {
  .drawer-section.section-5 .drawer-link {
    font-size: var(--drawer-s1-text-size-tablet);
  }
}

@media (min-width: 1024px) {
  .drawer-section.section-5 .drawer-link {
    font-size: var(--drawer-s1-text-size-desktop);
  }
}


.drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer-section.section-5 {
  margin-top: auto; /* section 5 descend en bas */
  padding-top: 10px;
}

/* ==================================================================
   9) LAYOUT BARRE HEADER — grille & symétrie finale
   ================================================================== */

/* === Desktop (≥768px) === */
@media (min-width: 768px) {
  #header-inner.header-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;  /* gauche | logo | droite */
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    column-gap: 20px;
  }

  /* Colonnes gauche/droite = icônes */
  #header-inner.header-bar .header-left,
  #header-inner.header-bar .header-right {
    display: flex;
    align-items: center;
    gap: 8px; /* réduit l’espace entre icônes */
  }

  /* Logo centré */
  #header-inner.header-bar .header-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #header-inner.header-bar .header-center img.logo-img {
    display: block;
    margin: 0 auto;
    height: auto;
    max-height: 120px; /* logo desktop */
    object-fit: contain;
    transform: translateX(1rem); /* décalage visuel */
  }
}

@media (max-width: 767px) {
  #header-inner.header-bar {
    grid-template-columns: 0.5fr 2fr 0.5fr; /* colonne centrale bien large */
    overflow: visible;
  }

  #header-inner.header-bar .header-center {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0 1rem;

    /* 👉 décalage horizontal appliqué au container */
    transform: translateX(12px);  
  }

  #header-inner.header-bar .header-center img.logo-img {
    width: auto;
    height: auto;
    max-height: 85px;
    object-fit: contain;
    transform: none !important;  /* on supprime le translate sur l’image */
  }
}






  /* Icônes */
  #hamburger-toggle,
  .search-compact,
  #nav-user .cart,
  #nav-user .account {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
  }
}

/* ==================================================================
   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; }
}




.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.modal.hidden { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
}
.modal__content {
  position: relative; background: #fff;
  padding: 2rem; border-radius: 12px;
  z-index: 10000; width: 90%; max-width: 400px;
  font-family: 'Inter',sans-serif;
  text-align: center;
}


/* Modal auth : resserrer l’espace logo ↔ titre */
#authModal .auth-logo{
  margin-bottom: 0px !important;            /* réduis si tu veux encore moins */
}

/* Cible l’élément juste après le logo (le titre "Se connecter") */
#authModal .auth-logo + *{
  margin-top: 0px !important;               /* tue le margin-top du h2 */
}

/* Sécurité si le thème remet un margin au h2 */
#authModal .modal__content h2{
  margin-top: 0px !important;
}




.modal__close {
  position: absolute; top: var(--modal-close-top-mobile); right: var(--modal-close-left-mobile);
  background: transparent; border: none; font-size: var(--modal-close-size);
  cursor: pointer;
}
.auth-logo {
  width: var(--modal-logo-size-mobile); height: var(--modal-logo-size-mobile);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  margin: 0 auto var(--modal-logo-offset-top-mobile);
}
.btn-auth {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .8rem; border-radius: 8px; font-weight: 500;
  cursor: pointer; margin-bottom: .8rem; border: 1px solid #ddd;
}
.btn-auth img { width: 18px; height: 18px; }
.btn-auth.google { background:#fff; color:#000; }
.btn-auth.apple  { background:#000; color:#fff; }
.divider { display:flex; align-items:center; color:#999; font-size:.9rem; margin:1rem 0; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:#ddd; }
.divider span { margin:0 .6rem; }
.btn-continue { margin-top:var(--modal-btn-offset-top-mobile); }
.auth-footer {
  display:flex; justify-content:space-between; margin-top:1.2rem;
  font-size:.85rem;
}
.auth-footer a { color:#1a73e8; text-decoration:none; }

/* Bouton fermer du modal → même style que drawer */
.modal__close {
  /* Reset ciblé */
  padding: 0 !important;
  min-width: auto !important;
  max-width: none !important;
  min-height: auto !important;
  max-height: none !important;
  box-shadow: none !important;
  background: #fff !important;

  /* Positionnement (reprend tes variables Liquid déjà définies) */
  position: absolute;
  top: var(--modal-close-top-mobile);
  right: var(--modal-close-left-mobile);

  
  /* Cercle parfait */
  width: 30px !important;
  height: 30px !important;
  aspect-ratio: 1/1 !important;
  border-radius: 50% !important;
  border: 1px solid #000 !important;

  /* Croix */
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #000 !important;

  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
  z-index: 2001;
}

/* Hover : fond blanc, croix noire (même effet que drawer) */
.modal__close:hover {
  background: #fff !important;
  color: #000 !important;
}

/* Active → effet tactile shrink */
.modal__close:active {
  transform: scale(0.85);
}
/* Neutralise les pseudo-éléments qui rendent le bouton noir */
.modal__close::before,
.modal__close::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}


.modal__close {
  right: 4px !important; /* augmente la valeur pour pousser plus à droite */
}

/* Bouton Google : blanc fixe, sans box-shadow */
#authModal .btn-auth.google {
  background: #000 !important;   /* fond noir */
  color: #fff !important;        /* texte blanc */
  box-shadow: none !important;   /* pas d’ombre */
  border: 2px solid #000 !important;
  transition: transform 0.1s ease; /* shrink fluide */
}

/* Icône Google toujours visible */
#authModal .btn-auth.google img {
  filter: none !important; 
}

/* Effet shrink au clic */
#authModal .btn-auth.google:active {
  transform: scale(0.95);
}

/* Neutraliser hover (pas d’inversion de couleurs) */
#authModal .btn-auth.google:hover {
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Bouton Apple : fond noir fixe, texte blanc fixe, sans ombre */
#authModal .btn-auth.apple {
  background: #000 !important;   /* fond noir */
  color: #fff !important;        /* texte blanc */
  box-shadow: none !important;   /* pas d’ombre */
  border: 2px solid #000 !important;
  transition: transform 0.1s ease; /* shrink fluide */
}

/* Effet shrink au clic */
#authModal .btn-auth.apple:active {
  transform: scale(0.95);
}

/* Neutraliser hover */
#authModal .btn-auth.apple:hover {
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
}
/* Harmoniser Google et Apple : même hauteur + alignement */
#authModal .btn-auth.google,
#authModal .btn-auth.apple {
  height: 38px; /* choisis la même valeur (ex : 48px ou 50px) */
  line-height: 1; /* évite que le texte gonfle la hauteur */
  display: flex;
  align-items: center; /* centre verticalement le contenu */
  justify-content: center;
  padding: 0 1rem; /* espace horizontal */
  font-size: 16px; /* taille uniforme */
  font-weight: 500;
  box-sizing: border-box;
}

#authModal .btn-auth.apple svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
#authModal input[type="email"] {
  display: block;
  width: 100% !important;     /* occupe toute la largeur */
  max-width: 100% !important; /* pas de restriction */
  box-sizing: border-box;     /* padding inclus dans la largeur */
  margin: 0 auto;             /* bien centré */
}

/* Bouton Continuer aligné sur le style Google/Apple */
#authModal .btn-continue {
  background: #000 !important;      /* fond noir */
  color: #fff !important;           /* texte blanc */
  border: 2px solid #000 !important;
  box-shadow: none !important;      /* pas d’ombre */
  width: 100% !important;           /* prend toute la largeur */
  height: 48px !important;          /* même hauteur que Google/Apple */
  border-radius: 8px !important;    /* arrondi identique */
  font-size: 16px !important;       /* taille uniforme */
  font-weight: 500 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s ease;  /* shrink fluide */
  margin-top: 1rem;                 /* petit espace au-dessus */
}

/* Shrink au clic */
#authModal .btn-continue:active {
  transform: scale(0.95);
}

/* Hover identique aux autres (pas d’inversion) */
#authModal .btn-continue:hover {
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
}


.auth-footer {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;     /* 🔥 augmenté (avant 0.85rem) */
  color: #555;
  width: 100%;
  text-align: center;
}

.auth-footer a {
  text-decoration: none;
  color: #555;
  font-weight: 500;    /* un peu plus lisible */
  transition: color 0.2s ease;
}

.auth-footer a:hover {
  color: #000;
}

.auth-footer .separator {
  width: 1.2px;
  height: 16px;        /* un peu plus haut si police + grande */
  background-color: #aaa;
}









/* 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: 999px; /* pills-like mais moins haut */
  padding: 0 .8rem;
  background: rgba(255,255,255,.9);
  transition: max-width .35s ease, opacity .25s ease;
  margin-left: 12px;
  height: 40px; /* fixe la hauteur plus compacte */
  font-family: "Inter", sans-serif; /* police uniforme */
}

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

#search.searchbar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.2rem; /* un peu plus grand que 1rem, mais pas énorme */
  font-family: "Inter", sans-serif; /* force Inter aussi ici */
  padding: 0 .5rem;
  outline: none;
}

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




/* 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;
}







/* Réduction espacement icônes header */
#header-inner.header-bar .header-left,
#header-inner.header-bar .header-right {
  gap: 0 !important;  /* réduit l’espace horizontal (avant 8px) */
}

#hamburger-toggle,
#header-inner .link-btn > a.search-compact,
#nav-user > ul > li > a {
  width: 25px !important;   /* avant 44px / 36px */
  height: 25px !important;  /* réduit la hit-box */
}

/* Icônes internes plus petites pour équilibrer */
#hamburger-toggle svg.hamburger-icon {
  width: 44px !important;
  height: 44px !important;
}
#header-inner .link-btn > a.search-compact i,
#nav-user > ul > li > a i {
  font-size: 20px !important;
}


@media (max-width: 767px) {
  #header-inner .header-left #hamburger-toggle {
    margin-top: .5rem !important;
  }
}




/* Décalage global du header-inner quand le header est scrolled */
#site-header.header--scrolled #header-inner {
  transform: translateY(-2.5rem); /* tu peux tester -0.25rem, -0.5rem, -1rem */
  transition: transform .3s ease;
}
/* Réduction padding-bottom quand header scrollé */
#site-header.header--scrolled {
  padding-top: .5rem;   /* un peu d’air en haut */
  padding-bottom: -20rem;    /* max compression en bas */
}



/* Nav pills collée en bas du header scrollé */
#site-header.header--scrolled .header__nav {
  bottom: 0 !important;   /* colle au bas du header */
}
@media (min-width: 768px) {
  #site-header.header--scrolled .header__nav {
    bottom: 2.5rem !important;
  }
}

@media (max-width: 767px) {
  #site-header.header--scrolled .header__nav {
    bottom: 1.5rem !important;
  }
}






/* Bloque l'overscroll/“rebond” du viewport (iOS 16+) */
html, body {
  overscroll-behavior-y: none; /* pas de pull-to-refresh ni rebond */
}
/* Solidifier la peinture du header sur iOS */
#site-header{
  z-index:1000;
  background: var(--header-bg, #fff);   /* fond réel (pas transparent) */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: auto;        /* éviter will-change permanent */
  contain: paint;
  isolation: isolate;
}

/* Si ton thème force parfois fixed via une classe */
#site-header.is-fixed,
#site-header[style*="position: fixed"]{
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}


/* iOS : ne laisse AUCUN ancêtre du header porter transform/filter/perspective */
@supports (-webkit-touch-callout: none){
  html, body, #root, .shopify-section-header{
    -webkit-transform: none !important;
            transform: none !important;
    filter: none !important;
    perspective: none !important;
  }
  /* Si tu utilises backdrop-filter sur le header, mieux vaut le couper sur iOS */
  #site-header{
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
}


/* Garde la même hauteur quand la barre d’URL se replie */
.zaroo-parallax-container{
  height: 100vh;
}
@supports (height: 100svh){ .zaroo-parallax-container{ height: 100svh; } }
@supports (height: 100dvh){ .zaroo-parallax-container{ height: 100dvh; } }








/* Zone du titre dans la section 1 */
.drawer-section.section-1{
  position: relative;
  min-height: 88px;                 /* met la zone grise un peu plus haute */
}

/* Bloc titre (SVG + prénom) */
.drawer-title-svg{
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  /* décale vers le bas et la droite : ajuste ces valeurs si besoin */
  transform: translate(10px, 12px);
}

@media (min-width: 768px){
  .drawer-title-svg{ transform: translate(16px, 16px); }
}

.drawer-title-svg path {
  fill: currentColor;     /* la couleur du texte */
  stroke: none;           /* plus de contour */
}


.drawer-section.section-1 p {
  margin-top: 6rem; /* force un espace supplémentaire */
}




/* Couleur + rendu normal (plein) */
/* Style de base */
.drawer-title-svg path {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0;
}

/* Animation séquentielle */
.drawer-title-svg.reveal path {
  opacity: 1;
  animation: draw 0.8s ease forwards;
}

/* Délais progressifs (lettre par lettre, de gauche à droite) */
.drawer-title-svg.reveal path:nth-child(1)  { animation-delay: 2.2s; }
.drawer-title-svg.reveal path:nth-child(2)  { animation-delay: 2s; }
.drawer-title-svg.reveal path:nth-child(3)  { animation-delay: 1.8s; }
.drawer-title-svg.reveal path:nth-child(4)  { animation-delay: 1.6s; }
.drawer-title-svg.reveal path:nth-child(5)  { animation-delay: 1.4s; }
.drawer-title-svg.reveal path:nth-child(6)  { animation-delay: 1.2s; }
.drawer-title-svg.reveal path:nth-child(7)  { animation-delay: 1s; }
.drawer-title-svg.reveal path:nth-child(8)  { animation-delay: 0.8s; }
.drawer-title-svg.reveal path:nth-child(9)  { animation-delay: 0.6s; }
.drawer-title-svg.reveal path:nth-child(10) { animation-delay: 0.4s; }
.drawer-title-svg.reveal path:nth-child(11) { animation-delay: 0.2s; }
.drawer-title-svg.reveal path:nth-child(12) { animation-delay: 0s; }

/* Animation stroke → tracé progressif */
@keyframes draw {
  to {
    stroke-dashoffset: 0;  /* trace */
    fill: #000;            /* rempli à la fin */
    stroke-width: 0;       /* supprime le contour */
  }
}



/* Ligne d'inscription uniquement */
.drawer-section.section-1 p.signup-prompt {
  /* rien sur mobile/tablette pour la taille */
}

/* Lien S’inscrire (rouge + souligné + position) */
.drawer-section.section-1 p.signup-prompt a#signup-link,
.drawer-section.section-1 p.signup-prompt a#openAuthModalSignup {
  color: #c61e18;                 /* rouge */
  font-weight: 300;               /* épaisseur 300 */
  text-decoration: underline;     /* toujours souligné */
  display: inline-block;          /* pour le shrink */
  transition: transform .1s ease; /* shrink au clic */
}

/* shrink au clic */
.drawer-section.section-1 p.signup-prompt a#signup-link:active,
.drawer-section.section-1 p.signup-prompt a#openAuthModalSignup:active {
  transform: scale(0.9);
}

/* ===== Desktop (≥1024px) : réduire la taille de la phrase + décaler le lien ===== */
@media (min-width: 1024px) {
  .drawer-section.section-1 p.signup-prompt {
    font-size: 1.5rem; /* ajuste si tu veux plus petit (0.9rem, etc.) */
  }
  .drawer-section.section-1 p.signup-prompt a#signup-link,
  .drawer-section.section-1 p.signup-prompt a#openAuthModalSignup {
    margin-left: 2rem;  /* décale le lien sur la droite */
  }
}

/* ===== Tablette (768–1023px) : juste décaler le lien ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .drawer-section.section-1 p.signup-prompt a#signup-link,
  .drawer-section.section-1 p.signup-prompt a#openAuthModalSignup {
    margin-left: 2rem;
  }
  .drawer-section.section-1 p.signup-prompt {
    font-size: 1.5rem; /* ajuste si tu veux plus petit (0.9rem, etc.) */
  }
}

/* ===== Mobile (≤767px) : juste décaler le lien ===== */
@media (max-width: 767px) {
  .drawer-section.section-1 p.signup-prompt a#signup-link,
  .drawer-section.section-1 p.signup-prompt a#openAuthModalSignup {
    margin-left: 2rem;
  }
  .drawer-section.section-1 p.signup-prompt {
    font-size: 1.5rem; /* ajuste si tu veux plus petit (0.9rem, etc.) */
  }
}

.drawer-logout {
  display: block;
  margin-top: 2.5rem; /* ajuste : 1rem, 2rem, 3rem selon l’espace voulu */
}





  



#hamburger-drawer .drawer-section.section-5{
  margin-top: 1.5rem !important; /* ne pousse plus tout le monde en bas */
}

/************ B) Fond gris sur toute la hauteur du contenu ************/
#hamburger-drawer::after{ content:none !important; } /* coupe l’ancien fond */
#hamburger-drawer .drawer-inner{ position:relative; z-index:1; }
#hamburger-drawer .drawer-inner::after{
  content:"";
  position:absolute;
  left:.15rem; right:.15rem;            /* mêmes marges que les cartes */
  top: var(--gray-top) !important;   /* ← utilise TES côtes */  
  bottom: 0;                            /* ⇦ va jusqu’en bas du contenu */
  background:#f5f5f5;
  border-radius:16px 16px 0 0;
  z-index:0; pointer-events:none;
}


/************ C) Sections 3 & 4 = cartes blanches visibles ************/
#hamburger-drawer .drawer-section.section-3,
#hamburger-drawer .drawer-section.section-4{
  display: block !important;
  position: relative !important;
  z-index: 2 !important;                 /* au-dessus du fond gris */
  background: #fff !important;
  color: #111 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
  margin: 0 .15rem 1.5rem !important;
  padding: 1rem 1.25rem !important;
}
/* listes propres (si ce sont des listes) */
#hamburger-drawer .section-3 ul,
#hamburger-drawer .section-4 ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
#hamburger-drawer .section-3 li,
#hamburger-drawer .section-4 li{ margin:0 !important; padding:.65rem 0 !important; border-bottom:1px solid #ececec !important; }
#hamburger-drawer .section-3 li:last-child,
#hamburger-drawer .section-4 li:last-child{ border-bottom:0 !important; }

/* liens : même typo/hover que section 2 */
#hamburger-drawer .section-3 a,
#hamburger-drawer .section-4 a,
#hamburger-drawer .section-3 .drawer-link,
#hamburger-drawer .section-4 .drawer-link{
  display:block !important;
  text-decoration:none !important;
  color:#111 !important;
  font-size:var(--drawer-s1-text-size-mobile) !important;
  line-height:1.4 !important;
  transition: color .25s ease, transform .22s cubic-bezier(.2,.7,.2,1) !important;
}
#hamburger-drawer .section-3 a:hover,
#hamburger-drawer .section-4 a:hover,
#hamburger-drawer .section-3 .drawer-link:hover,
#hamburger-drawer .section-4 .drawer-link:hover{
  color:#000 !important; transform: translateX(6px) !important;
}
@media (min-width:768px){
  #hamburger-drawer .section-3 a,
  #hamburger-drawer .section-4 a,
  #hamburger-drawer .section-3 .drawer-link,
  #hamburger-drawer .section-4 .drawer-link{ font-size:var(--drawer-s1-text-size-tablet) !important; }
}
@media (min-width:1024px){
  #hamburger-drawer .section-3 a,
  #hamburger-drawer .section-4 a,
  #hamburger-drawer .section-3 .drawer-link,
  #hamburger-drawer .section-4 .drawer-link{ font-size:var(--drawer-s1-text-size-desktop) !important; }
}
/* === FIX: remettre le conteneur en flex pour que la section 5 réapparaisse === */
#hamburger-drawer .drawer-inner{
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  position: relative !important;
  z-index: 1 !important;         /* le fond gris reste derrière */
  padding-bottom: 1rem;          /* un peu d'air en bas */
}

/* Le fond gris interne reste derrière tout le contenu */
#hamburger-drawer .drawer-inner::after{ z-index: 0 !important; }

/* Toutes les sections passent devant le fond gris */
#hamburger-drawer .drawer-section{ position: relative !important; z-index: 2 !important; }

/* Section 5: on annule l'ancien margin-top et on recolle en bas */
#hamburger-drawer .drawer-section.section-5{
  margin-top: auto !important;   /* ⇦ recolle en bas grâce au flex */
  padding-top: 10px !important;
}

/* ===== Section 5 = carte noire (mêmes tailles que la section 2) ===== */
#hamburger-drawer .drawer-section.section-5{
  position: relative !important;
  z-index: 2 !important;                 /* devant le fond gris */
  background: #000 !important;           /* carte noire */
  color: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.20) !important;
  margin: 0 .15rem 1.5rem !important;    /* mêmes marges latérales que les autres cartes */
  padding: 1rem 1.25rem !important;
  margin-top: auto !important;           /* reste collée en bas du drawer */
}

/* Liste propre dans la carte (si ul/li) */
#hamburger-drawer .section-5 ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#hamburger-drawer .section-5 li{
  margin: 0 !important;
  padding: .65rem 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
}
#hamburger-drawer .section-5 li:last-child{ border-bottom: 0 !important; }

/* Liens : mêmes tailles que section 2, sans icônes */
#hamburger-drawer .section-5 a,
#hamburger-drawer .section-5 .drawer-link{
  display: block !important;
  text-decoration: none !important;
  color: #fff !important;
  font-size: var(--drawer-s1-text-size-mobile) !important;
  line-height: 1.4 !important;
  transition: color .25s ease, transform .22s cubic-bezier(.2,.7,.2,1) !important;
}
#hamburger-drawer .section-5 a:hover,
#hamburger-drawer .section-5 .drawer-link:hover{
  color: #eaeaea !important;
  transform: translateX(6px) !important;
}

/* Tailles tablette/desktop alignées sur la section 2 */
@media (min-width: 768px){
  #hamburger-drawer .section-5 a,
  #hamburger-drawer .section-5 .drawer-link{
    font-size: var(--drawer-s1-text-size-tablet) !important;
  }
}
@media (min-width: 1024px){
  #hamburger-drawer .section-5 a,
  #hamburger-drawer .section-5 .drawer-link{
    font-size: var(--drawer-s1-text-size-desktop) !important;
  }
}







/* === Section 3 (et 4) : + d'espacement vertical entre items === */
#hamburger-drawer .section-3,
#hamburger-drawer .section-4{
  padding: 1.2rem 1.25rem !important;     /* un peu plus d'air dans la carte */
}

#hamburger-drawer .section-3 .drawer-link,
#hamburger-drawer .section-4 .drawer-link,
#hamburger-drawer .section-3 li,
#hamburger-drawer .section-4 li{
  padding: .95rem 0 !important;           /* avant ~.65rem */
  line-height: 1.35 !important;           /* texte moins tassé */
}

#hamburger-drawer .section-3 li + li,
#hamburger-drawer .section-4 li + li{
  margin-top: .1rem;                       /* micro respiration entre lignes */
}

/* dernier item sans trait ni gros padding */
#hamburger-drawer .section-3 li:last-child,
#hamburger-drawer .section-4 li:last-child,
#hamburger-drawer .section-3 .drawer-link:last-child,
#hamburger-drawer .section-4 .drawer-link:last-child{
  padding-bottom: .2rem !important;
  border-bottom: 0 !important;
}

/* paliers responsives (un peu plus d'espace sur écrans >768 / >1024) */
@media (min-width:768px){
  #hamburger-drawer .section-3 .drawer-link,
  #hamburger-drawer .section-4 .drawer-link,
  #hamburger-drawer .section-3 li,
  #hamburger-drawer .section-4 li{ padding: 1.05rem 0 !important; }
}
@media (min-width:1024px){
  #hamburger-drawer .section-3 .drawer-link,
  #hamburger-drawer .section-4 .drawer-link,
  #hamburger-drawer .section-3 li,
  #hamburger-drawer .section-4 li{ padding: 1.15rem 0 !important; }
}
/* === Section 3 : réduire l'espace bas de la carte === */
#hamburger-drawer .section-3{
  padding-bottom: .45rem !important;         /* avant ~1.2rem */
}

#hamburger-drawer .section-3 .drawer-link:last-child,
#hamburger-drawer .section-3 li:last-child{
  padding-bottom: .15rem !important;         /* resserre le dernier item */
}

/* S'il reste un <hr> dans la carte, on le neutralise pour éviter la marge */
#hamburger-drawer .section-3 > .drawer-divider{
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
  border: 0 !important;
}

/* (optionnel) garder un bas compact aussi sur tablette/desktop */
@media (min-width:768px){
  #hamburger-drawer .section-3{ padding-bottom: .55rem !important; }
}
@media (min-width:1024px){
  #hamburger-drawer .section-3{ padding-bottom: .6rem !important; }
}






/* ===== Section 3 : icônes = même rendu que section 2 ===== */
.drawer-section.section-3 .drawer-icon{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width: var(--sec2-icon-size-m);
  height: var(--sec2-icon-size-m);
}
.drawer-section.section-3 .drawer-icon svg{
  width:100%; height:100%;
  color:#555;                       /* couleur de base identique s.2 */
  transition: color .3s ease, transform .3s ease;
}
/* Hover identique à s.2 */
.drawer-section.section-3 .drawer-link:hover .drawer-icon svg{
  color:#000;
  transform: scale(1.15);
}
/* Poids des icônes en trait (bébé) */
.drawer-section.section-3 .drawer-icon svg path,
.drawer-section.section-3 .drawer-icon svg line,
.drawer-section.section-3 .drawer-icon svg polyline,
.drawer-section.section-3 .drawer-icon svg circle,
.drawer-section.section-3 .drawer-icon svg rect,
.drawer-section.section-3 .drawer-icon svg polygon{
  stroke-width: var(--sec2-icon-stroke) !important;
}
.drawer-section.section-3 .drawer-link:hover .drawer-icon svg path,
.drawer-section.section-3 .drawer-link:hover .drawer-icon svg line,
.drawer-section.section-3 .drawer-link:hover .drawer-icon svg polyline,
.drawer-section.section-3 .drawer-link:hover .drawer-icon svg circle,
.drawer-section.section-3 .drawer-link:hover .drawer-icon svg rect,
.drawer-section.section-3 .drawer-link:hover .drawer-icon svg polygon{
  stroke-width: var(--sec2-icon-stroke-hover) !important;
}

/* “Pour Elle” = rouge comme Idée Cadeau */
.drawer-section.section-3 .drawer-link--female .drawer-icon svg{
  color:#e60023;
}

/* Tailles responsive alignées sur la s.2 */
@media (min-width:768px){
  .drawer-section.section-3 .drawer-icon{
    width: var(--sec2-icon-size-t);
    height: var(--sec2-icon-size-t);
  }
}
@media (min-width:1024px){
  .drawer-section.section-3 .drawer-icon{
    width: var(--sec2-icon-size-d);
    height: var(--sec2-icon-size-d);
  }
}
/* === FIX alignement icône/texte pour la section 3 (même rendu que s.2) === */
#hamburger-drawer .drawer-section.section-3 .drawer-link{
  display: flex !important;             /* reprend le flex de la s.2 */
  align-items: center !important;
  gap: .65rem !important;               /* même écart icône/texte */
  padding: .5rem 0 !important;          /* même vertical que s.2 (ajuste si besoin) */
}

#hamburger-drawer .drawer-section.section-3 .drawer-icon{
  flex-shrink: 0;
  width: var(--sec2-icon-size-m);
  height: var(--sec2-icon-size-m);
}
@media (min-width:768px){
  #hamburger-drawer .drawer-section.section-3 .drawer-icon{
    width: var(--sec2-icon-size-t); height: var(--sec2-icon-size-t);
  }
}
@media (min-width:1024px){
  #hamburger-drawer .drawer-section.section-3 .drawer-icon{
    width: var(--sec2-icon-size-d); height: var(--sec2-icon-size-d);
  }
}

/* Pour être nickel sur le hover comme s.2 */
#hamburger-drawer .drawer-section.section-3 .drawer-link:hover .drawer-icon svg{
  transform: scale(1.15);
  color:#000;
}







/* ====== SECTION 4 — Patch espacement & alignements ====== */

/* Lignes d’items : moins d’air + centrage + place pour le chevron */
.drawer-section.section-4 .simple-item > a,
.drawer-section.section-4 .sub-item > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 10px 2.4rem 10px 1rem; /* top right bottom left */
  min-height: 44px;
  line-height: 1.2;
}

/* Séparateurs resserrés + espace top carte réduit */
.drawer-section.section-4 .simple-item,
.drawer-section.section-4 .sub-item {
  border-bottom: 1px solid #e9e9e9;
}
.drawer-section.section-4 .simple-item:first-child { margin-top: 0px; } /* ↓ espace entre "Vêtements" et top carte */
.drawer-section.section-4 .simple-item:last-child,
.drawer-section.section-4 .sub-item:last-child { border-bottom: 0; }


/* Sous-menus : mêmes alignements + espaces resserrés */
.drawer-section.section-4 .sub-menu {
  display: none;
  margin-left: 1.2rem;
  padding: 4px 0;            /* ↓ espace interne du bloc déployé */
}
.drawer-section.section-4 .simple-item.open > .sub-menu,
.drawer-section.section-4 .sub-item.open > .sub-menu {
  display: block;
}
.drawer-section.section-4 .sub-menu .sub-item > a {
  padding: 8px 2.4rem 8px 1rem;  /* un peu plus serré que le niveau 1 */
  gap: .65rem;
}

/* Cercles/icônes : BEAUCOUP plus grands + alignés au texte */
.drawer-section.section-4 .sub-item-icon {
  width: 4rem;                   /* ancien 2.2rem → plus grand */
  height: 4rem;
  border-radius: 50%;
  border: 1px solid #000;
  overflow: hidden;
  margin-right: .65rem;
  display: inline-flex;            /* alignement parfait sur l’axe Y */
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  vertical-align: middle;
}
.drawer-section.section-4 .sub-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ===== SECTION 4 — "Seconde Main" en rouge (texte + cercle) ===== */

/* 1) Texte du lien (pas de changement de font-weight) */
.drawer-section.section-4 a[href*="seconde" i] {
  color: #e60023 !important;
  font-weight: inherit !important;
}

/* 2) Cercle quand il est DANS le lien */
.drawer-section.section-4 a[href*="seconde" i] .sub-item-icon,
.drawer-section.section-4 a[href*="seconde" i] .circle,
.drawer-section.section-4 a[href*="seconde" i] .bullet {
  border-color: #e60023 !important;
}

/* 3) Cercle quand il est HORS du lien (parent <li> avec :has) */
.drawer-section.section-4 li:has(> a[href*="seconde" i]) .sub-item-icon,
.drawer-section.section-4 li:has(> a[href*="seconde" i]) .circle,
.drawer-section.section-4 li:has(> a[href*="seconde" i]) .bullet {
  border-color: #e60023 !important;
}

/* 4) Si le “cercle” est un SVG */
.drawer-section.section-4 li:has(> a[href*="seconde" i]) .sub-item-icon svg,
.drawer-section.section-4 a[href*="seconde" i] .sub-item-icon svg {
  stroke: #e60023 !important;
  fill: currentColor; /* au besoin */
  color: #e60023;
}

/* 5) Si c’est un input radio/checkbox (accent-color) */
.drawer-section.section-4 li:has(> a[href*="seconde" i]) input[type="radio"],
.drawer-section.section-4 li:has(> a[href*="seconde" i]) input[type="checkbox"] {
  accent-color: #e60023 !important;
}
/* ===== SECTION 4 — "Seconde Main" : texte en rouge ===== */

/* Cible le lien + tout le contenu texte à l'intérieur */
.drawer-section.section-4 li > a[href*="seconde-main" i],
.drawer-section.section-4 li > a[href*="seconde%20main" i],
.drawer-section.section-4 li > a[href*="seconde" i][href*="main" i],
.drawer-section.section-4 li > a[href*="seconde-main" i] *,
.drawer-section.section-4 li > a[href*="seconde%20main" i] *,
.drawer-section.section-4 li > a[href*="seconde" i][href*="main" i] * {
  color: #e60023 !important;
  font-weight: inherit !important; /* ne change pas le poids */
}




/* On coupe le ::after pour éviter les conflits */
#hamburger-drawer .drawer-inner::after{ content:none !important; }

/* Fond gris qui commence à --gray-top et couvre tout ce qui est visible */
#hamburger-drawer{
  background:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--gray-top, 0px),
      #f5f5f5 var(--gray-top, 0px),
      #f5f5f5 100%
    ) !important;
  background-attachment: local !important; /* le fond suit le scroll */
}
#hamburger-drawer{
  background:
    linear-gradient(
      to bottom,
      #fff 0,                              /* Section 1 blanche */
      #fff var(--gray-top, 140px),
      #f5f5f5 var(--gray-top, 140px),      /* le reste gris */
      #f5f5f5 100%
    ) !important;
  background-attachment: local !important;
}





/* Drawer = hauteur du viewport visible (OK Android/iOS) */
#hamburger-drawer{
  height: 100vh;                 /* fallback */
  overscroll-behavior-y: contain;/* évite que la page derrière prenne le scroll */
}
@supports (height: 100dvh){
  #hamburger-drawer{ height: 100dvh; }
}
@supports (height: 100svh){
  #hamburger-drawer{ height: 100svh; } /* pour vieux Chrome mobile */
}

/* Petit coussin en bas pour bien remonter la section 5 au-dessus de la barre système */
#hamburger-drawer .drawer-inner{
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}
html.drawer-open, body.drawer-open{
  overflow: hidden;
  height: 100%;
}





/* ===============================
   Section 4 — items encore plus compacts
   =============================== */

/* Tous les items de niveau 1 (Mode, Maison, …) */
#hamburger-drawer .drawer-section.section-4 .simple-item > a {
  padding: .1rem 1rem 0.1rem 1rem !important; /* avant .5rem */
  line-height: 1 !important;
  min-height: 0 !important;
}

/* Premier item */
#hamburger-drawer .drawer-section.section-4 .simple-item:first-child > a {
  padding-top: .1rem !important;
}

/* Carte section 4 → resserrer haut/bas */
#hamburger-drawer .drawer-section.section-4 {
  padding-top: .1rem !important;
  padding-bottom: .1rem !important;
}


/* ====================================
   Section 4 — Chevron stylisé en CSS
   ==================================== */
.drawer-section.section-4 .drawer-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg); /* flèche bas */
  width: 10px;   /* largeur branche → joue dessus pour ouvrir/fermer */
  height: 10px;  /* hauteur branche */
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  pointer-events: none; /* le clic passe sur le lien */
  transition: transform .25s ease;
}

/* Quand l’item est ouvert → chevron vers le haut */
.drawer-section.section-4 .simple-item.open > a > .drawer-arrow,
.drawer-section.section-4 .sub-item.open > a > .drawer-arrow {
  transform: translateY(-50%) rotate(-135deg);
}