/** Shopify CDN: Minification failed

Line 124:0 Unexpected "}"

**/
/* =========================
   LumiZen Design System
   ========================= */

/* 2.1 Variables globales */
:root{
  /* Vert forêt cosy */
  --brand-600:#2E4F39; /* CTA principal */
  --brand-700:#274533; /* Hover CTA */
  --brand-200:#E3ECE7; /* Fond léger, placeholders */

  /* Neutres */
  --bg:#FFFFFF;
  --bg-alt:#F7F7F5;
  --text:#111111;
  --text-muted:#555555;

  /* Rayons & ombres */
  --radius:12px;
  --shadow:0 6px 20px rgba(0,0,0,.06);

  /* Échelle d’espacement */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px; --space-8:56px;

  /* Largeurs */
  --container:1200px;
}



/* 2.3 Layout & espacements : on compacte Craft */
.section{padding:var(--space-6) 0}
@media (min-width:990px){ .section{padding:var(--space-7) 0} }
.container,.page-width{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5)}
.section-header .title,.title-wrapper-with-link .title{letter-spacing:-.01em;margin-bottom:var(--space-4)}

/* 2.4 Boutons : CTA plein (vert) + secondaire outline */
.button,.button--primary,.shopify-payment-button__button--unbranded,.btn,.btn-primary{
  background:var(--brand-600);color:#fff;border:none;border-radius:var(--radius);
  padding:12px 16px;font-weight:600;box-shadow:none
}
.button:hover,.button--primary:hover,.shopify-payment-button__button--unbranded:hover,.btn-primary:hover{
  background:var(--brand-700)
}
/* secondaire */
.button--secondary,.btn-secondary{
  background:#fff;color:var(--brand-600);border:1px solid var(--brand-600);
  border-radius:var(--radius);padding:10px 16px;font-weight:600
}
/* Liens d’action (ex: “Voir la collection”) */
.link,.underline-links a{text-underline-offset:2px}

/* 2.5 Cartes produit : on supprime bordures Craft, on met ombre douce */
.card,.card-wrapper,.card--card,.product-card,.product-grid .card-wrapper{
  border:none;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--bg)
}
/* Titre/prix compact sur cartes */
.card-information,.card__information{padding:var(--space-3) var(--space-4)}
.card .price,.price{font-weight:600}

/* 2.6 Images ratio 4:5 (évite le “saut” de mise en page) */
.card .media,.card-wrapper .media,.product-card .media,.media--square{
  aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius)
}
.card img,.card-wrapper img,.product-card img{width:100%;height:100%;object-fit:cover}

/* 2.7 Formulaires */
input,select,textarea{
  border-radius:10px;border:1px solid #ddd;padding:10px 12px
}

/* 2.8 Bandes “fond alt” (avantages, etc.) */
.section--alt{background:var(--bg-alt);border-radius:16px;padding:var(--space-6)}

/* 2.9 Divers “anti-Craft” */
.badge,.badge--bottom-left,.badge--top-left{border-radius:10px}
.quantity__button,.quantity__input{border-radius:10px}




/* Bottom bar mobile */
.bb{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; justify-content:space-around; gap:6px;
  background:#fff; border-top:1px solid #eee; padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  z-index:80;
}
.bb-tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; color:#333; text-decoration:none}
.bb-tab svg{display:block}
.bb-tab.is-active{color:var(--brand-600); font-weight:600}
@media (min-width: 990px){ .bb{display:none} }
body{ padding-bottom: 64px } /* pour ne pas masquer le contenu par la barre */

/* --- FIX 1 : la grande tuile en mosaïque doit remplir toute la hauteur --- */
@media (min-width: 990px){
  /* la tuile 1 occupe 2 rangées -> on force l'image à s'étirer sur 100% */
  .layout--mosaic .cl-item:nth-child(1){height:100%;}
  .layout--mosaic .cl-item:nth-child(1) .cl-tile{height:100%;}
  .layout--mosaic .cl-item:nth-child(1) .cl-img{
    height:100%;
    aspect-ratio:auto; /* on annule le ratio fixe */
  }
}

/* --- FIX 2 : texte des tuiles toujours blanc (et CTA lisible) --- */
.cl-text,
.cl-text .cl-title,
.cl-text .cl-sub,
.cl-text .cl-cta { color:#fff !important; }
.cl-cta{ background: rgba(255,255,255,.16); }

/* overlay un poil plus présent pour lisibilité du texte */
.cl-overlay{
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15));
}

}

/* overlay un peu plus léger pour ne pas assombrir le fond */
.cl-tile .cl-overlay{
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.08));
}
/* Grande tuile en 2:3 pour coller à la photo (aucun zoom) */
@media (min-width: 990px){
  .layout--mosaic .cl-item:nth-child(1) .cl-img{
    aspect-ratio: 2/3 !important;
  }
}
/* RESET uniquement pour les 2 petites tuiles (mosaïque) */
@media (min-width:990px){
  /* 2e et 3e tuiles */
  .layout--mosaic .cl-item:not(:first-child) .cl-img{
    aspect-ratio: 4/5 !important;
    height: auto !important;
    background: transparent !important; /* pas de bande */
  }
  .layout--mosaic .cl-item:not(:first-child) .cl-img img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;      /* image pleine, pas de dézoom */
    object-position: center center;
  }
  /* overlay par défaut (lisible, pas trop sombre) */
  .layout--mosaic .cl-item:not(:first-child) .cl-overlay{
    background: linear-gradient(to top, rgba(0,0,0,.48), rgba(0,0,0,.10)) !important;
  }
}
/* --- Petites tuiles (2e et 3e) : état initial, on n'y touche pas --- */
@media (min-width:990px){
  .layout--mosaic .cl-item:not(:first-child) .cl-img{ aspect-ratio: 4/5 !important; }
  .layout--mosaic .cl-item:not(:first-child) .cl-img img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit: cover !important; object-position: center;
  }
  .layout--mosaic .cl-item:not(:first-child) .cl-tile{ background: transparent !important; }
}

/* --- Grande tuile (1re) : dé-zoom sans bande --- */
@media (min-width:990px){
  /* occuper exactement la hauteur des 2 rangées */
  .layout--mosaic .cl-item:first-child,
  .layout--mosaic .cl-item:first-child .cl-tile,
  .layout--mosaic .cl-item:first-child .cl-img{ height: 100% !important; }

  /* on laisse le grid tel quel; on annule tout ratio fixe ici */
  .layout--mosaic .cl-item:first-child .cl-img{ 
    aspect-ratio: auto !important;
    background: var(--bg-alt, #f5f5f5) !important; /* fond clair discret, pas noir */
  }
  .layout--mosaic .cl-item:first-child .cl-img img{
    width:100%; height:100%;
    object-fit: contain !important;   /* dé-zoom, 0 recadrage */
    object-position: center top;
  }
  .layout--mosaic .cl-item:first-child .cl-tile{ background: transparent !important; }
  .layout--mosaic .cl-item:first-child .cl-overlay{
    background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.08)) !important;
  }
}

/* Sécurité globale : jamais de fond noir visible sous les images */
.cl-tile{ background: transparent !important; }
/* ---- Cartes produit LumiZen ---- */
.pc{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06);display:flex;flex-direction:column}
.pc-imgwrap{position:relative;display:block}
.pc-imgwrap img,.pc-img--placeholder{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;background:#f3f3f3}
.pc-badges{position:absolute;top:10px;left:10px;display:flex;gap:8px;z-index:1}
.pc-badge{background:#111;color:#fff;border-radius:999px;padding:6px 10px;font-size:12px;line-height:1}
.pc-badge--sale{background:#e94141}
.pc-info{padding:12px 14px}
.pc-title{font-family:Sora,Inter,sans-serif;font-size:16px;margin:0 0 6px;line-height:1.3}
.pc-title a{color:inherit;text-decoration:none}
.pc-price{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pc-price__now{font-weight:700}
.pc-price__was{text-decoration:line-through;color:#999}
.pc-actions{display:flex;gap:8px}
.pc-add{flex:1;appearance:none;border:0;background:var(--brand-600,#246b4a);color:#fff;padding:10px 12px;border-radius:10px;font-weight:600;cursor:pointer}
.pc-add[disabled]{background:#c9c9c9;cursor:not-allowed}
.pc-more{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:10px;border:1px solid #ddd;text-decoration:none;color:#333}
.pc:hover .pc-imgwrap img{transform:scale(1.02);transition:.25s ease transform}
/* ---- Barre filtres mobile ---- */
.cfb{position:sticky;top:0;z-index:20;background:var(--bg-alt,#f7f7f7);padding:8px 12px;border-bottom:1px solid #eee}
.cfb-btn{appearance:none;border:1px solid #ddd;background:#fff;border-radius:999px;padding:8px 14px;font-weight:600}
.cfb-pills{display:flex;gap:8px;overflow:auto;padding-top:8px}
.cfb-pill{white-space:nowrap;border:1px solid #ddd;border-radius:999px;padding:6px 10px;text-decoration:none;color:#333;background:#fff}
@media(min-width:990px){ .cfb{display:none} } /* mobile only */

/* ====== Header LumiZen – polish visuel ====== */
.header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);transition:box-shadow .2s ease, background-color .2s ease}
.header--scrolled{box-shadow:0 8px 24px rgba(0,0,0,.06);background:#fff}


/* Liens du menu */
.header .header__inline-menu .list-menu__item{padding:12px 14px;font-weight:600}
.header .header__inline-menu .list-menu__item a{color:#111;text-decoration:none}

/* Soulignement au survol + état actif */
.header .header__inline-menu .list-menu__item a::after{
  content:"";display:block;height:2px;background:var(--brand-600,#246b4a);
  width:0;transition:width .18s ease;margin-top:6px;border-radius:2px
}
.header .header__inline-menu .list-menu__item a:hover::after,
.header .header__inline-menu .list-menu__item--active a::after{width:100%}

/* Sous-menus : coins doux + ombre légère */
.header .header__submenu, .menu-drawer__submenu{
  border-radius:14px;box-shadow:0 12px 28px rgba(0,0,0,.10);overflow:hidden
}

/* Mobile : resp*
/* ===== Mega-menu LumiZen (collections) ===== */
.mega-menu__content.lz-mega{ padding:22px 28px; }
.lz-mega__grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:1040px;
}
@media(min-width:1200px){ .lz-mega__grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }

.lz-mega__card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  text-decoration:none; background:#fff;
  border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease;
}
.lz-mega__card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); }

.lz-mega__img{
  width:140px; height:96px; border-radius:12px; overflow:hidden;
  background:#F4F5F7; display:flex; align-items:center; justify-content:center;
}
.lz-mega__img img{ width:100%; height:100%; object-fit:cover; }

.lz-mega__ph{
  width:64px; height:64px; border-radius:12px;
  background:linear-gradient(180deg,#f2f2f2,#e9e9e9);
}

.lz-mega__title{ margin-top:10px; font-weight:700; color:#111; }

/* Mobile : on laisse le drawer gérer, pas de mega visuel */
@media(max-width:989px){ .mega-menu__content.lz-mega{ display:none; } }
/* --- FIX images étirées sur les pages Collection (Craft) --- */

/* 1) Neutralise toute règle globale du type img{height:100%} */
.template-collection img { height: auto !important; }

/* 2) Redonne un ratio au conteneur et recadre proprement l'image */
.template-collection .card__media { aspect-ratio: 1 / 1; }          /* carré, propre sur mobile */
.template-collection .card__media img { 
  width: 100%; 
  height: 100% !important; 
  object-fit: cover !important; 
}

/* Option portrait (si tu préfères plus haut que large) */
/* .template-collection .card__media { aspect-ratio: 4 / 5; } */
/* === Fix LumiZen : images étirées en page Collection (mobile only) === */
@media (max-width: 749px) {
  /* force un ratio constant pour les cartes produit sur les collections */
  body.template-collection #product-grid .card__inner.ratio,
  body.template-collection #product-grid .card.ratio {
    --ratio-percent: 100% !important; /* carré, stoppe l'effet "mega étiré" */
  }

  /* on s'assure que l'image remplit correctement sans déformer */
  body.template-collection #product-grid .card__media .media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/* === Fix: images étirées sur pages Collection (mobile only) === */
@media (max-width: 749px) {
  /* On neutralise le hack de ratio sur les cartes de produit en collection */
  body.template-collection #product-grid .ratio::before {
    padding-bottom: 0 !important;
  }
  body.template-collection #product-grid .card__inner.ratio,
  body.template-collection #product-grid .card.ratio {
    display: block !important;
  }

  /* Les conteneurs .media reprennent une hauteur auto, l'image gère le ratio */
  body.template-collection #product-grid .card__media,
  body.template-collection #product-grid .card .media {
    position: relative !important;
    height: auto !important;
  }

  /* L’image garde son ratio sans étirement */
  body.template-collection #product-grid .card .media > img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}
/* Remet le bouton "Voir" au-dessus des images, mobile inclus */
body.template-collection .card,
body.template-product .card,
.card__inner{position:relative}

.card__media,.card .media{
  z-index:1;
  overflow:hidden;
}

/* L’image ne bloque plus les taps */
.card .media>img{pointer-events:none}

/* Contenu/CTA au-dessus de l’image */
.card__content,.card-information,.card__actions,.card__badge{
  position:relative;
  z-index:3;
}

/* Sur appareils tactiles, on force l’affichage du CTA si le thème le masque au hover */
@media(hover:none){
  .card__actions .button,
  .card__content .button,
  .card__content .link{
    opacity:1!important;
    transform:none!important;
    visibility:visible!important;
  }
}