/** Shopify CDN: Minification failed

Line 460:27 Unexpected "*"

**/

/* ===== CAMPTON ROUNDED ===== */
@font-face {
  font-family: 'Campton';
  src: url('/cdn/shop/files/Compton.woff2?v=1761727571') format('woff2'),
       url('/cdn/shop/files/Compton.woff?v=1761727571') format('woff');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Campton Medium';
  src: url('/cdn/shop/files/Campton-Medium.woff2?v=1762499250') format('woff2'),
       url('/cdn/shop/files/Campton-Medium.woff?v=1762499251') format('woff');
  font-style: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Campton SemiBold';
  src: url('/cdn/shop/files/Campton-SemiBold.woff2?v=1762499251') format('woff2'),
       url('/cdn/shop/files/Campton-SemiBold.woff?v=1762499251') format('woff');
  font-style: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Campton Light';
  src: url('/cdn/shop/files/Campton-Light_4b69dd2e-79c4-416d-b66c-e5c6c2c010ec.woff2?v=1762499250') format('woff2'),
       url('/cdn/shop/files/Campton-Light_5baff69e-58a3-4529-8ba5-838c8b461422.woff?v=1762499251') format('woff');
  font-style: 300;
  font-display: swap;
}


body, p, a {
  font-family: 'Campton Light', sans-serif!important;
  font-weight:400;
  line-height:1.2;
  letter-spacing:0!important
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Campton SemiBold', sans-serif!important;
  font-weight: 600;
  letter-spacing:0!important
}

body, .color-background-1, .color-background-2, .color-inverse, .color-accent-1, .color-accent-2{
  color:black!important;
}

/* =========================================================
   TYPO SYSTEM — Campton Rounded
   ========================================================= */

/* 0) Variables globales (faciles à ajuster) */
:root{
  /* Familles & graisses */
  --ff-title:   'Campton', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ff-text:    'Campton Light', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --w-book:     400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* Letter-spacing (em = %/100)  -> ajuste ici si besoin  */
  --ls--1:  -0.01em;
  --ls--4:  -0.04em;
  --ls-0:    0em;
  --ls-1:    0.01em;

  /* Line-heights “type scale”  */
  --lh-tight-90:  0.90;   /* grands titres très serrés */
  --lh-tight-95:  0.95;
  --lh-title:     1.05;
  --lh-sub:       1.15;
  --lh-text:      1.35;

  /* Option responsive : breakpoints */
  --bp-md:  768px;
  --bp-lg:  1200px;
}

/* 1) RESET de base pour titres/textes (optionnel) */
h1,h2,h3,h4,h5,h6{
  margin: 0 0 .5em;
  font-weight: 700;
}

/* =========================================================
   TITLES
   (Title/XL_150, L_72, M_42, S_32, XS_16)
   ========================================================= */

/* Title XL — 150 */
.title--xl{
  font-family: var(--ff-title);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls--1);
  line-height: var(--lh-tight-90);
  font-size: clamp(3rem, 6vw, 150px);
}

/* Title L — 72 */
.title--l{
  font-family: var(--ff-title);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls--4);
  line-height: var(--lh-tight-95);
  font-size: clamp(2.25rem, 4vw, 72px);
}

/* Title M — 42 */
.title--m{
  font-family: var(--ff-title);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls--4);
  line-height: var(--lh-title);
  font-size: clamp(1.75rem, 2.8vw, 42px);
}

/* Title S — 32 */
.title--s{
  font-family: var(--ff-title);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls--4);
  line-height: var(--lh-title);
  font-size: clamp(1.5rem, 2.2vw, 32px);
}

/* Title XS — 16 (normal & bold) */
.title--xs{
  font-family: var(--ff-title);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-0);
  line-height: var(--lh-sub);
  font-size: 16px;
}
.title--xs.is-bold{ font-weight: var(--w-bold); letter-spacing: var(--ls--1); }

/* =========================================================
   SUBTITLES
   (XXL_32, XL_26, L_16, L(bold)_16, M_14, M(bold)_14, S_12, XS_10)
   ========================================================= */

.subtitle--xxl{
  font-family: var(--ff-title);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls--1);
  line-height: var(--lh-title);
  font-size: clamp(1.5rem, 2.2vw, 32px);
}

.subtitle--xl{
  font-family: var(--ff-title);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls--1);
  line-height: var(--lh-title);
  font-size: clamp(1.25rem, 1.9vw, 26px);
}

.subtitle--l{
  font-family: var(--ff-title);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-0);
  line-height: var(--lh-sub);
  font-size: 16px;
}
.subtitle--l.is-bold{ font-weight: var(--w-bold); letter-spacing: var(--ls--1); }

.subtitle--m{
  font-family: var(--ff-title);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-0);
  line-height: var(--lh-sub);
  font-size: 14px;
}
.subtitle--m.is-bold{ font-weight: var(--w-bold); }

.subtitle--s{
  font-family: var(--ff-title);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-0);
  line-height: var(--lh-sub);
  font-size: 12px;
}

.subtitle--xs{
  font-family: var(--ff-title);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-0);
  line-height: var(--lh-sub);
  font-size: 10px;
}

/* =========================================================
   TEXT
   (BIG_100, XL_40, L_24, M_18, S_16 & S(bold), 
    XS_14 & XS(bold), XXS_12 & XXS(bold))
   ========================================================= */

.text--big{
  font-family: var(--ff-text);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls--1);
  line-height: var(--lh-title);
  font-size: clamp(2rem, 7vw, 100px);
}

.text--xl{
  font-family: var(--ff-text);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls--1);
  line-height: var(--lh-title);
  font-size: clamp(1.5rem, 3vw, 40px);
}

.text--l{
  font-family: var(--ff-text);
  font-weight: var(--w-book);
  letter-spacing: var(--ls--2, -0.02em); /* option si tu veux -2% */
  line-height: var(--lh-text);
  font-size: 24px;
}

.text--m{
  font-family: var(--ff-text);
  font-weight: var(--w-book);
  letter-spacing: var(--ls-0);
  line-height: var(--lh-text);
  font-size: 18px;
}

.text--s{
  font-family: var(--ff-text);
  font-weight: var(--w-book);
  letter-spacing: var(--ls-0);
  line-height: var(--lh-text);
  font-size: 16px;
}
.text--s.is-bold{ font-weight: var(--w-bold); }

.text--xs{
  font-family: var(--ff-text);
  font-weight: var(--w-book);
  letter-spacing: var(--ls-0);
  line-height: var(--lh-text);
  font-size: 14px;
}
.text--xs.is-bold{ font-weight: var(--w-bold); }

.text--xxs{
  font-family: var(--ff-text);
  font-weight: var(--w-book);
  letter-spacing: var(--ls-0);
  line-height: var(--lh-text);
  font-size: 12px;
}
.text--xxs.is-bold{ font-weight: var(--w-bold); }


.is-book{font-weight:var(--w-book);}
.is-medium{font-weight:var(--w-medium);}
.is-semibold{font-weight:var(--w-semibold);}
.is-bold{font-weight:var(--w-bold);}
.ls--1{letter-spacing:var(--ls--1);}
.ls--4{letter-spacing:var(--ls--4);}

/* MENU */ 



#HeaderMenu-abonnement,
.link, .customer a,
.header li{
    text-transform:uppercase; 
    font-weight:500; 
    font-size:12px; 
    font-family:'Campton Medium'!important;
}

summary .icon-caret {
    top: calc(50% - 0.4rem)!important;
}

.mm__item-text{
  font-family:'Campton Light'!important;
}

.mm__view-all a{
  color:#969696!important;
}

/* ---------- Transparent header (Dawn) ---------- */

/* Header vraiment transparent en haut de page */
.section-header.header--transparent .header-wrapper,
.section-header.header--transparent .header{
  box-shadow: none !important;
}

/* Supprime la ligne si activée dans Dawn */
.section-header.header--transparent .header-wrapper.header-wrapper--border-bottom{
  border-bottom: 0 !important;
}

/* Couleurs sur fond transparent (mode clair = texte/icônes blancs) */
.section-header.header--transparent.is-light .header__icon,
.section-header.header--transparent.is-light .header__icon svg,
.section-header.header--transparent.is-light .list-menu__item--link,
.section-header.header--transparent.is-light .header__heading-link{
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* Variante sombre (texte/icônes noirs) */
.section-header.header--transparent.is-dark .header__icon,
.section-header.header--transparent.is-dark .header__icon svg,
.section-header.header--transparent.is-dark .list-menu__item--link,
.section-header.header--transparent.is-dark .header__heading-link{
  color: #111 !important;
  fill: #111 !important;
  stroke: #111 !important;
}

/* Dès qu'on scrolle, Dawn remet le fond normal */
.section-header.scrolled-past-header .header-wrapper,
.section-header.scrolled-past-header .header{
  background: var(--color-background, inherit);
}

/* ===== Transparent Header — Dawn ===== */

/* Header transparent au chargement */
.header.header--transparent{
  background: transparent !important;
  box-shadow: none !important;
}

/* enlève la ligne si elle existe via Dawn */
.header-wrapper.header-wrapper--border-bottom:has(.header.header--transparent){
  border-bottom: 0 !important;
}

/* Couleur des liens/icônes/texte quand transparent */
.header.header--transparent.is-light .header__icon,
.header.header--transparent.is-light .header__icon svg,
.header.header--transparent.is-light .list-menu__item--link,
.header.header--transparent.is-light .header__heading-link{
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

.header.header--transparent.is-dark .header__icon,
.header.header--transparent.is-dark .header__icon svg,
.header.header--transparent.is-dark .list-menu__item--link,
.header.header--transparent.is-dark .header__heading-link{
  color: #111 !important;
  fill: #111 !important;
  stroke: #111 !important;
}

/* Quand on scrolle (Dawn ajoute .scrolled-past-header sur .section-header) 
   on retire la transparence pour revenir au fond normal du thème */
.section-header.scrolled-past-header .header{
  background: var(--color-background, inherit);
  box-shadow: var(--shadow-small, none);
}

/* ======== FORCE VRAIE TRANSPARENCE ======== */

/* Le wrapper (le fond coloré de Dawn) */
.section-header .header-wrapper.is-transparent {
  background: none !important;        /* retire le gradient inline */
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* La balise <header> interne (structure) */
.header.header--transparent {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Quand on veut “voir” la transparence au dessus d’un hero */
.section-header .header-wrapper.is-transparent::before,
.section-header .header-wrapper.is-transparent::after {
  content: none !important;
}

/* ——— True transparent header for Dawn ——— */

.section-header.header--transparent .header-wrapper,
.section-header.header--transparent .header {
  /* kill all backgrounds including Dawn's gradient */
  background-color: transparent !important;
  background-image: none !important;
  --gradient-background: transparent !important;
  box-shadow: none !important;
}

/* if the line separator was enabled, hide it while transparent */
.section-header.header--transparent .header-wrapper.header-wrapper--border-bottom {
  border-bottom-color: transparent !important;
}

/* Dawn sometimes uses ::before/::after layers; remove them */
.section-header.header--transparent .header::before,
.section-header.header--transparent .header::after,
.section-header.header--transparent .header-wrapper::before,
.section-header.header--transparent .header-wrapper::after {
  content: none !important;
}

/* keep it transparent when sticky at top (until you scroll past) */
.shopify-section-header-sticky .section-header.header--transparent .header-wrapper {
  background-color: transparent !important;
  background-image: none !important;
  --gradient-background: transparent !important;
  box-shadow: none !important;
}

/* ——— Color style while transparent ——— */
/* Light = white content on dark hero */
.section-header.header--transparent.is-light .header,
.section-header.header--transparent.is-light .header * {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* Dark = dark content on light hero */
.section-header.header--transparent.is-dark .header,
.section-header.header--transparent.is-dark .header * {
  color: #111 !important;
  fill: #111 !important;
  stroke: #111 !important;
}

/* Optional: ensure header stays above hero media */
.section-header { z-index: 50; }

/* Cards produits */ 
/* ===== Cards produits – même hauteur ===== */

/* 1) Que chaque cellule de la grille “étire” sa card sur toute la hauteur */
.product-grid .grid__item,
.related-products .grid__item,
#shopify-section-template--* .grid__item {
  display: flex;
}
.product-grid .grid__item > .card-wrapper,
.related-products .grid__item > .card-wrapper {
  display: flex;
  width: 100%;
}

/* 2) La card occupe 100% de la hauteur disponible et s’organise en colonne */
.card.card--standard,
.card.card--card,
.card.card--media,
.card.card--text {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;           /* carte blanche */
  border-radius: 16px;        /* adapte si tu veux */
}

/* 3) La zone prix (dernier .card__content) est poussée en bas */
.card .card__content:last-of-type {
  margin-top: auto;
}

/* 4) Hauteur/titres homogènes : on contraint le titre à 2 lignes max */
.card .card__heading {
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* 2 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;          /* garde l’espace même si titre court */
}

/* 5) (Optionnel) ratio d’image stable, même rendu partout */
.card__inner.ratio {
  /* si besoin, fixe un ratio; 100% = carré, 125% = portrait, etc. */
  --ratio-percent: 100%;
}

/* 6) Petits réglages visuels pour aligner mieux */
.card .card__information { padding-bottom: 0; }
.card .price { margin-top: 8px; }

/* — Header overlay quand il est transparent — */
.section-header.header--transparent {
  position: absolute;         /* passe au-dessus du contenu */
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

/* Option “safe” : quand overlay actif, on permet au 1er bloc de remonter sous le header */
body.header-overlay .shopify-section:first-of-type {
  /* Le header garde sa hauteur (var déjà posée par Dawn via JS) */
  margin-top: calc(-1 * var(--header-height));
}

/* Si jamais tu as une page SANS hero (il ne faut pas recouvrir le contenu),
   ajoute 'no-hero' au <body> pour neutraliser l’overlay. */
body.no-hero .shopify-section:first-of-type {
  margin-top: 0;
  padding-top: var(--header-height);
}

.header{
border-radius: 30px;
padding-top: 18px;
padding-right: 40px;
padding-bottom: 18px;
padding-left: 40px;
background-color:rgba(0, 0, 0, 0.2)!important;
  backdrop-filter: blur(12px); /* le flou du fond */
  -webkit-backdrop-filter: blur(12px); /* Safari */
margin-top:10px;
margin-left:10px; 
margin-right:10px;
z-index:999999!important;
}

.scrolled-past-header summary .icon-caret,
.scrolled-past-header span,
.scrolled-past-header a{
    color:white;
    fill-color:white;
}


/* =========================
   Milia Matcha – Header + Mega menus
   ========================= */

/* --- Placement des 2 navs autour du logo (desktop) --- */
@media (min-width: 990px){
  /* Nav GAUCHE (tous les items sauf Milia World) */
  .header__inline-menu{
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
  }
  .header__inline-menu > .list-menu--inline{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  /* Nav DROITE (uniquement Milia World) */
  .header__inline-menu--right{
    margin-left: auto;
    margin-right: 2rem; /* ajuste si besoin */
  }
  .header__inline-menu--right > .list-menu--inline{
    display: flex;
    align-items: center;
    gap: 2rem;
  }
}

/* --- Mega SHOP (3 colonnes + image à droite) --- */
.mm{display:grid;gap:32px}
.mm--shop{grid-template-columns:1fr minmax(360px,520px);align-items:start}
.mm__cols-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
@media (max-width: 1200px){
  .mm__cols-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.mm__col{min-width:0}
.mm__col-title{
  font-weight:700;letter-spacing:.02em;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.12)
}
.mm__col-list li{margin:8px 0}
.mm__item{display:flex;align-items:center;gap:8px}
.mm__item:before{content:'\2192';display:inline-block;opacity:.6;transform:translateY(-1px)}
.mm__item-text{line-height:1.4}
.mm__view-all a{color:#999;text-transform:uppercase;letter-spacing:.06em;font-size:.9em}

.mm__aside{justify-self:end}
.mm__aside-card{display:block;text-decoration:none}
.mm__aside-media{
  position:relative;aspect-ratio:var(--ratio,4/3);
  overflow:hidden;border-radius:14px
}
.mm__img{width:100%;height:100%;object-fit:cover;display:block}
.mm__aside-text{margin-top:12px}
.mm__aside-title{font-weight:700}
.mm__aside-caption{opacity:.8}
.mm-pill{
  position:absolute;left:12px;top:12px;display:inline-block;
  font-size:.75rem;line-height:1;border-radius:999px;
  padding:10px 10px 8px!important;background:#f6d7de;color:#000;font-weight:700
}

/* --- MILIA WORLD : grilles + CTA --- */
.mm-world__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px
}
@media (max-width: 1200px){
  .mm-world__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.mm-world__card{text-decoration:none;display:block}
.mm-world__media{
  position:relative;aspect-ratio:var(--ratio,3/4);
  overflow:hidden;border-radius:14px
}
.mm-world__img{width:100%;height:100%;object-fit:cover;display:block}
.mm-world__img--ph{display:grid;place-items:center;background:#f2f2f2;height:100%;color:#777}
.mm-world__title{padding-top:10px!important;font-weight:700}
.mm-world__subtitle{margin-top:2px;color:#777}

/* CTA bandeau */
.mm-world__cta{background:#0f0f0f;color:#fff;margin-top:24px}
.mm-world__cta-inner{max-width:var(--page-width,1200px);margin:0 auto;padding:48px 24px;text-align:center}
.mm-world__cta-title{font-size:clamp(22px,3vw,36px);font-weight:700}
.mm-world__cta-sub{opacity:.85;margin-top:4px}
.mm-world__cta-btn{display:inline-block;margin-top:16px;border-bottom:1px solid currentColor;padding-bottom:4px}

/* --- Drawer mobile (reprend les mêmes classes) --- */
.menu-drawer .mm__cols-list{grid-template-columns:1fr;gap:16px}
.menu-drawer .mm__aside{grid-column:1/-1}
.menu-drawer .mm__aside-media{aspect-ratio:3/4}

/* Petit confort : espace entre nav de droite et icônes sur très grands écrans */
@media (min-width: 1400px){
  .header__inline-menu--right{margin-right:3rem}
}

/* ===== Forcer les couleurs noires dans tous les mega menus ===== */
.mega-menu,
.mega-menu * {
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}

/* Si tu veux que les liens aient un léger effet hover gris foncé */
.mega-menu a:hover,
.mega-menu a:focus {
  color: #111 !important;
}

/* Optionnel : s’assure que les icônes caret restent noires */
.mega-menu summary svg {
  stroke: #000 !important;
  fill: none !important;
}

/* ===== Force le texte du MEGA MENU en noir, même si le header est transparent/is-light ===== */
.section-header.header--transparent.is-light .mega-menu__content,
.section-header.header--transparent.is-light .mega-menu__content * {
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}

/* Si tu veux que ce soit toujours noir (quel que soit le scheme) */
.header .mega-menu__content,
.header .mega-menu__content * {
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}

/* Liens du me
ga au survol/focus */
.header .mega-menu__content a:hover,
.header .mega-menu__content a:focus {
  color: #111 !important;
}

/* (optionnel) fond du panneau pour éviter le texte noir sur fond sombre */
.header .mega-menu__content {
  background: #fff !important;
}

/* ===== Style des items dans le mega menu ===== */
.mm__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: color .3s ease;
}

/* Flèche (invisible par défaut) */
.mm__item::before {
  content: "→";
  position: absolute;
  left: -20px;
  opacity: 0;
  transform: translateX(-4px);
  transition: all .3s ease;
}

/* Au hover : la flèche glisse et apparaît */
.mm__item:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Espacement propre entre les lignes */
.mm__col-list li {
  margin: 10px 0;
}

/* Couleur hover plus foncée */
.mm__item:hover {
  color: #000;
}

/* Petits détails visuels */
.mm__col-title {
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.15);
  text-transform: uppercase;
}

/* Voir tout : gris plus clair et sans flèche */
.mm__view-all a {
  color: #999 !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  text-decoration: none;
}
.mm__view-all a::before {
  content: none;
}
.mm__view-all a:hover {
  color: #000 !important;
}

/* ============================
   MEGA MENU — Mise en page clean Milia
   ============================ */

/* Supprime les puces et aligne les colonnes proprement */
.mm__cols-list,
.mm__col-list {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

.mm__col-list li {
  list-style: none !important;
  margin: 10px 0;
  padding: 0;
}

/* Chaque colonne prend 1/3 de la largeur */
.mm__cols-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  width: 100%;
  align-items: start;
}

/* Forcer à occuper tout l'espace dispo à gauche */
.mm--shop {
  grid-template-columns: 1fr minmax(380px, 520px);
  align-items: start;
  width: 100%;
}

/* Colonne */
.mm__col {
  min-width: 0;
}

/* Titres de colonnes */
.mm__col-title {
  font-weight: 700;
  letter-spacing: .03em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,.15);
  text-transform: uppercase;
  font-size: 14px;
}

/* Items */
.mm__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color .3s ease;
}

/* Flèche invisible par défaut */
.mm__item::before {
  content: "→";
  position: absolute;
  left: -20px;
  opacity: 0;
  transform: translateX(-4px);
  transition: all .25s ease;
}

/* Apparition fluide au hover */
.mm__item:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Couleur hover */
.mm__item:hover {
  color: #000;
}

/* "Voir tout" en gris clair, sans flèche */
.mm__view-all a {
  color: #999 !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  text-decoration: none;
}
.mm__view-all a::before {
  content: none;
}
.mm__view-all a:hover {
  color: #000 !important;
}

/* Image à droite */
.mm__aside {
  justify-self: end;
  align-self: start;
}
.mm__aside-media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 14px;
  overflow: hidden;
}
.mm__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mm__aside-text {
  margin-top: 12px;
}
.mm__aside-title {
  font-weight: 500;
  padding-top:10px; 
  font-family:'Campton Medium';
}
.mm__aside-caption {
  opacity: .8;
}

/* Le pill “NEW” */
.mm-pill {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-block;
  font-size: .75rem;
  line-height: 1;
  border-radius: 999px;
  padding: 10px 10px 8px;
  background: #f6d7de;
  color: #000;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 1200px){
  .mm__cols-list{grid-template-columns:repeat(2,1fr);}
}

/* ===== Mega menu : passer la liste à 6 colonnes ===== */
.header .mega-menu__content .mega-menu__list,
.header .mega-menu__content .mega-menu__list--condensed {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8em !important;   /* espace entre colonnes */
}

/* Empêche les colonnes de “casser” par min-width hérités */
.header .mega-menu__content .mega-menu__list > li {
  min-width: 0 !important;
}

/* Nettoyage : pas de puces, pas de padding parasite */
.header .mega-menu__content .mega-menu__list,
.header .mega-menu__content .mega-menu__list ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive: reviens à 4 → 3 → 2 colonnes si l’espace manque */
@media (max-width: 1400px){
  .header .mega-menu__content .mega-menu__list,
  .header .mega-menu__content .mega-menu__list--condensed {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 1200px){
  .header .mega-menu__content .mega-menu__list,
  .header .mega-menu__content .mega-menu__list--condensed {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 990px){
  .header .mega-menu__content .mega-menu__list,
  .header .mega-menu__content .mega-menu__list--condensed {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================
   Mega menu — ajustement flèche + "voir tout"
   ============================ */

/* Items */
.mm__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color .25s ease;
  padding-left: 22px; /* espace pour loger la flèche */
}

/* Flèche bien calée (masquée par défaut) */
.mm__item::before {
  content: "→";
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: all .25s ease;
  font-weight: 400;
}

/* Apparition fluide au hover */
.mm__item:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Couleur hover */
.mm__item:hover {
  color: #000;
}

/* Supprime puces & espace */
.mm__col-list li {
  list-style: none !important;
  margin: 8px 0;
  padding: 0;
}

/* -------- "Voir tout" -------- */
.mm__view-all a.link {
  display: inline-block;
  color: #a0a0a0 !important; /* gris clair */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  text-decoration: none;
  padding-left: 0;
}

/* Pas de flèche sur "voir tout" */
.mm__view-all a::before {
  content: none !important;
}

/* Hover plus foncé mais reste sobre */
.mm__view-all a:hover {
  color: #000 !important;
}

/* Titres de colonnes */
.mm__col-title {
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,.15);
  text-transform: uppercase;
  font-size: 14px;
}

/* Correction affichage global */
.mm__cols-list, .mm__col-list {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

/* ============================
   MEGA MENU — Clean overrides (FINAL)
   Place this block at the very end of your CSS.
   ============================ */

/* Layout colonnes (gauche = 3 colonnes / droite = image) */
.header .mega-menu__content .mm--shop{
  display: grid;
  grid-template-columns: 1fr minmax(380px,520px);
  gap: 40px;
  align-items: start;
  width: 100%;
}
.header .mega-menu__content .mm__cols-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 60px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.header .mega-menu__content .mm__col{min-width:0;}
.header .mega-menu__content .mm__col-list{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.header .mega-menu__content .mm__col-list > li{
  list-style: none !important;
  margin: 10px 0;
  padding: 0;
}

/* Titres de colonnes */
.header .mega-menu__content .mm__col-title{
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(0,0,0,.15);
  text-transform:uppercase;
  font-size:14px;
}

/* ---------- Liens + flèche ---------- */
/* au repos : parfaitement aligné (pas de padding gauche) */
.header .mega-menu__content .mm__item{
  position:relative;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  font-weight:700;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.04em;
  transition: all .25s ease;
  padding-left:0;         /* aligné */
  color:#000;             /* forcer noir */
}

/* flèche en dehors du flux, invisible au repos */
.header .mega-menu__content .mm__item::before{
  content:"→";
  position:absolute;
  left:0px;
  opacity:0;
  transform:translateX(-6px);
  transition:all .25s ease;
  font-weight:400;
}

/* au hover : flèche visible + léger décalage du texte */
.header .mega-menu__content .mm__item:hover{
  padding-left:18px;
}
.header .mega-menu__content .mm__item:hover::before{
  opacity:1;
  transform:translateX(0);
}

/* ---------- "VOIR TOUT" : gris, sans flèche ---------- */
.header .mega-menu__content .mm__view-all a,
.header .mega-menu__content .mm__view-all .link{
  display:inline-block;
  color:#A0A0A0 !important;   /* gris clair */
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:12px;
  text-decoration:none;
  padding-left:0 !important;
}
.header .mega-menu__content .mm__view-all a::before,
.header .mega-menu__content .mm__view-all .link::before{
  content:none !important;    /* jamais de flèche */
}
.header .mega-menu__content .mm__view-all a:hover,
.header .mega-menu__content .mm__view-all .link:hover{
  color:#000 !important;      /* hover sobre */
}

/* ---------- Image à droite ---------- */
.header .mega-menu__content .mm__aside{justify-self:end;align-self:start;}
.header .mega-menu__content .mm__aside-media{
  position:relative;
  aspect-ratio:4/5;
  border-radius:14px;
  overflow:hidden;
}
.header .mega-menu__content .mm__img{width:100%;height:100%;object-fit:cover;display:block;}
.header .mega-menu__content .mm__aside-text{margin-top:12px;}
.header .mega-menu__content .mm__aside-title{font-weight:700;}
.header .mega-menu__content .mm__aside-caption{opacity:.8;}

/* ---------- Couleurs : toujours noir dans le panneau ---------- */
.header .mega-menu__content,
.header .mega-menu__content *{
  color:#000 !important;
  fill:#000 !important;
  stroke:#000 !important;
}
.header .mega-menu__content{ background:#fff !important; } /* fond blanc du panneau */

/* ---------- Responsive colonnes ---------- */
@media (max-width:1200px){
  .header .mega-menu__content .mm__cols-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;}
}



/* ==============================
   MILIA WORLD — cartes méga menu
   ============================== */

/* 1) même hauteur pour TOUTES les images */
.mm-world__media{
  /* choisis 1 option : */

  /* A) hauteur fixe (le plus clean visuellement) */
  height: 340px;                 /* ajuste 300–380px selon ta maquette */
  /* B) si tu préfères un ratio fixe, commente la ligne height et décommente: */
  /* aspect-ratio: 4 / 5; */

  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 1400px){ .mm-world__media{ height: 320px; } }
@media (max-width: 1200px){ .mm-world__media{ height: 300px; } }

.mm-world__img{
  width: 100%;
  height: 100%;
  object-fit: cover;              /* recadre sans déformer */
  display: block;
}

/* 2) typographies des textes sous image */
.mm-world__card,
.mm-world__title,
.mm-world__subtitle{
  text-transform: none !important;   /* neutralise l’uppercase global sur <a> */
}

.mm-world__title{
  margin-top: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  padding-bottom:5px; 
  font-family:'Campton Medium'; font-weight:500;
}

.mm-world__subtitle p{
  margin-top: 4px;
  color: #969696!important;                   /* gris */
  font-weight: 400;
  letter-spacing: 0;                /* pas d’uppercase => pas besoin d’étirer */
  line-height: 1.4;
  font-size: 14px;
}

/* 3) grille et espacements (au cas où) */
.mm-world__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1200px){
  .mm-world__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==============================
   MILIA WORLD — cartes uniformisées
   ============================== */

/* Grille 4 colonnes */
.mm-world__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
}
@media (max-width:1200px){
  .mm-world__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Images uniformes */
.mm-world__media{
  height:450px;            
  border-radius:16px;
  overflow:hidden;
  position:relative;
  width:100%;
}
.mm-world__img{
  width:100%;
  height:100%;
  object-fit:cover;         
  object-position:center;   
  display:block;
}

/* Titre : uppercase et noir */
.mm-world__title{
  margin-top:14px;
  font-weight:700;
  text-transform:uppercase!important;
  letter-spacing:.04em;
  color:#000;
  line-height:1.25;
  font-size:15px;
}

/* Description : gris moyen et non uppercase */
.mm-world__subtitle{
  color:#777!important;               
  font-weight:400;
  font-size:14px;
  line-height:1.4;
  text-transform:none !important;
  letter-spacing:0;
}

.mm-world__subtitle p{
  color:#777!important;  
  margin-top:5px!important;
}

/* Supprime héritages éventuels d’uppercase global sur les liens */
.mm-world__card,
.mm-world__card *{
  text-transform:none;
}
.mm-world__title{text-transform:uppercase;} /* on le remet uniquement sur le titre */

/* =========================================================
   Header blanc complet quand un méga menu est ouvert
   ========================================================= */

/* 1) Détection du menu ouvert */
.header-wrapper.color-background-1.gradient details[open],
.section-header.header--transparent .header-wrapper.color-background-1.gradient details[open] {
  background: var(--color-background, #fff) !important;
}

/* 2) Force le fond complet du header */
.section-header.header--transparent .header-wrapper.color-background-1.gradient,
.section-header.header--transparent .header.color-background-1.gradient {
  transition: background-color .3s ease, box-shadow .3s ease;
}

.section-header.header--transparent .header-wrapper.color-background-1.gradient:has(details[open]),
.section-header.header--transparent .header.color-background-1.gradient:has(details[open]) {
  background: #fff!important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* 3) Texte, liens et icônes en noir */
.section-header.header--transparent .header-wrapper.color-background-1.gradient:has(details[open]) *,
.section-header.header--transparent .header.color-background-1.gradient:has(details[open]) * {
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}

/* 4) Supprime toute transparence résiduelle */
.section-header.header--transparent .header-wrapper.color-background-1.gradient,
.section-header.header--transparent .header.color-background-1.gradient {
  background-color: transparent !important;
}

/* ===== Transparent ONLY when no menu is open ===== */

/* Base transparent look (top of page) */
.section-header.header--transparent:not(.menu-open) .header-wrapper,
.section-header.header--transparent:not(.menu-open) .header {
  background-image: none !important;
  box-shadow: none !important;
}

/* Light/Dark color modes ONLY when no menu is open */
.section-header.header--transparent:not(.menu-open).is-light .header,
.section-header.header--transparent:not(.menu-open).is-light .header * {
  color:#fff !important; fill:#fff !important; stroke:#fff !important;
}
.section-header.header--transparent:not(.menu-open).is-dark .header,
.section-header.header--transparent:not(.menu-open).is-dark .header * {
  color:#111 !important; fill:#111 !important; stroke:#111 !important;
}

/* When ANY mega menu <details> is open → use the theme background (white) */
.section-header.header--transparent.menu-open .header-wrapper,
.section-header.header--transparent:has(details[open]) .header-wrapper,
.section-header.header--transparent:has(details[open]) .header {
  background: var(--color-background, #fff) !important;
}

/* And switch content to dark while open */
.section-header.header--transparent.menu-open .header *,
.section-header.header--transparent:has(details[open]) .header * {
  color:#000 !important; fill:#000 !important; stroke:#000 !important;
}

/* If the Dawn border-bottom is enabled, keep it white header while open */
.section-header.header--transparent.menu-open .header-wrapper.header-wrapper--border-bottom,
.section-header.header--transparent:has(details[open]) .header-wrapper.header-wrapper--border-bottom {
  border-bottom-color: rgba(0,0,0,.08) !important;
}

/* ========= Badges (menu + mega) ========= */
:root{
  --badge-bg: #F7DDE4;   /* rose du visuel */
  --badge-text: #111;     /* noir */
  --badge-radius: 6px;   /* coins arrondis */
  --badge-pad-y: .45rem;
  --badge-pad-x: .9rem;
  --badge-font: 12px;     /* taille */
  --badge-ls: .08em;      /* tracking léger */
}

/* Style de base commun */
.mm-pill, 
.mm-badge,
.menu-badge{
  display: inline-block;
  background: var(--badge-bg) !important;
  color: var(--badge-text) !important;
  border-radius: var(--badge-radius);
  line-height: 1;
  font-weight: 400;
  font-size: var(--badge-font);
  letter-spacing: var(--badge-ls);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,.06);
}

/* Variante inline (à côté d’un libellé de lien) */
.mm-badge--inline,
.menu-badge--inline{
  position: static;
  margin-left: .6rem;
}

/* Variante overlay (sur une image de carte méga-menu) */
.mm-badge--overlay{
  position: absolute;
  left: 12px; top: 12px;
  z-index: 2;
}

/* Taille plus petite (option) */
.mm-badge--sm, .menu-badge--sm{ font-size: 11px; padding: .35rem .7rem; }

/* Assure la lisibilité même quand le header est “transparent/is-light” */
.section-header.header--transparent .header *,
.header * .mm-badge,
.header * .menu-badge{
  color: var(--badge-text) !important;
}

/* Distance propre dans les listes du mega menu */
.mm__col-list .mm-badge--inline,
.mm__item .mm-badge--inline{ margin-left: .7rem; }


.mm.mm--world.page-width,
.mm.mm--shop.page-width,
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-account{
  max-width:100%!important;
}

.scrolled-past-header .icon-caret *,
.scrolled-past-header summary .icon-caret, .scrolled-past-header span, .scrolled-past-header a {
    color: white!important;
    fill: white!important;
    stroke:white!important;
  }

  /* ===== Annuler le header "glass" quand sticky OU menu ouvert ===== */

/* 1) Quand le header est sticky (classe ajoutée par Dawn) */
/*.shopify-section-header-sticky .section-header.scrolled-past-header .header,
.shopify-section-header-sticky .section-header.scrolled-past-header .header-wrapper {
  /* fond blanc, pas de blur, pas de bord arrondi, pas de marges/paddings extra */
 /* background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}*/

/* Couleurs noires pour tout le contenu du header en sticky */
.shopify-section-header-sticky .section-header.scrolled-past-header .header,
.shopify-section-header-sticky .section-header.scrolled-past-header .header * {
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}



/* Contenu noir quand le mega-menu est ouvert */
.section-header .header-wrapper:has(details[open]) *,
.section-header .header:has(details[open]) * {
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}

.header{
border-radius: 30px;
padding-top: 18px;
padding-right: 40px;
padding-bottom: 18px;
padding-left: 40px;
background-color:rgba(0, 0, 0, 0.2)!important;
  backdrop-filter: blur(12px); /* le flou du fond */
  -webkit-backdrop-filter: blur(12px); /* Safari */
margin-top:10px;
margin-left:10px; 
margin-right:10px;
z-index:999999!important;
}

.section-header.shopify-section-group-header-group {
    z-index: 9999;
}

.header__icon .svg-wrapper{
  max-height:22px!important;
}

.header__icon--search .svg-wrapper{
  max-height:33px!important;
}

/* ---------- "VOIR TOUT" : gris, sans flèche ---------- */
.header .mega-menu__content .mm__view-all a,
.header .mega-menu__content .mm__view-all .link{
  display:inline-block;
  color:#A0A0A0 !important;   /* gris clair */
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:12px;
  text-decoration:none;
  padding-left:0 !important;
}

/* ======= FIX DAWN – force layout 60/40 sur PDP ======= */
@media (min-width: 990px){
  .template-product .product__media-wrapper {
    max-width: none !important;
    width: 60% !important;
    flex: 0 0 60% !important;
  }
  .template-product .product__info-wrapper {
    max-width: none !important;
    width: 40% !important;
    flex: 0 0 40% !important;
  }
}

.template-product .product__media-wrapper media-gallery,
.template-product .product__media-wrapper .product__media-list,
.template-product .product__media-wrapper .product__media-item,
.template-product .product__media-wrapper .product__media,
.template-product .product__media-wrapper .product__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-width: none !important;
}

.template-product .product-media-container::before {
  display: none !important; /* retire le ratio-padding Dawn */
}

/* === PDP 60/40 – version “Custom CSS” avec spécificité boostée === */
@media (min-width: 990px){
  body.template-product .product.product--left.product--thumbnail .product__media-wrapper.product__media-wrapper {
    min-height: 100vh !important;
    max-width: none !important;
    width: 60% !important;
    flex: 0 0 60% !important;
  }
  body.template-product .product.product--left.product--thumbnail .product__info-wrapper.product__info-wrapper {
    max-width: none !important;
    width: 40% !important;
    flex: 0 0 40% !important;
  }
}

body.template-product .product__media-wrapper media-gallery,
body.template-product .product__media-wrapper .product__media-list,
body.template-product .product__media-wrapper .product__media-item,
body.template-product .product__media-wrapper .product__media,
body.template-product .product__media-wrapper .product__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-width: none !important;
}

body.template-product .product-media-container::before { display:none !important; }
body.template-product .product-media-container { padding-top:0 !important; }
body.template-product .constrain-height { max-height:none !important; }


.section-header .header-wrapper:has(details[open]) *, .section-header .header:has(details[open]) *{
  margin-top:0px!important;
}

.cart-count-bubble{
  background-color:#FFD9E0; 
}

.section-header.shopify-section-header-sticky.scrolled-past-header .header{
  background: rgba(0,0,0,.22) !important;
  -webkit-backdrop-filter: blur(12px)!important;
  backdrop-filter: blur(12px)!important;
  border-radius: 30px;
  margin: 0 10px 10px !important; /* plus de marge en haut */
  padding: 18px 40px;
  box-shadow: none !important;
}


/* tue la “bande blanche” (wrapper et bordure Dawn) */
.section-header .header-wrapper{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.section-header.header--transparent .header-wrapper.header-wrapper--border-bottom{
  border-bottom: 0 !important;
}

/* quand un mega-menu (<details>) est ouvert → fond blanc plein, pas de blur */
.section-header.shopify-section-header-sticky.scrolled-past-header.is-menu-open .header,
.section-header.is-menu-open .header,
.section-header.is-menu-open .header-wrapper{
  background:#fff!important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-radius:0 !important;
  margin:0 !important;
}

.h3r__kicker,
.sm__kicker,
.edito__kicker {
margin: 0 0 16px !important;
    font-size: 13px!important;
    letter-spacing: 0!important;
    text-transform: uppercase;
    opacity: .65;
}

.drawer__inner{
  width:70rem!important;
}

#HeaderDrawer-abonnement:after,
#HeaderMenu-abonnement:after{
  content:'COMING SOON';
  font-size: 9px;
    margin-top: -12px;
    margin-left: 5px;
    padding:2px 5px 0px; 
    background-color:#FFD9E0; 
    color:black; 
    border-radius:5px;
}




/* Le header doit passer au-dessus de tout */
.section-header,
.header,
.header-wrapper {
  position: relative;
  z-index: 10010 !important;
  overflow: visible !important;
}

/* Le panneau méga-menu doit être cliquable et au-dessus */
.mega,
.mega-menu,
.header__mega,
.header__submenu,
.header-mega {
  position: relative;
  z-index: 10020 !important;
  pointer-events: auto;
}

/* Si un wrapper de page met un overlay au-dessus, on le remet derrière */
.template-page .shopify-section,
.template-page .main-content,
.page,
.page-width {
  position: relative;
  z-index: 1;
}

/* Au cas où un overlay “page” intercepte les clics */
.page-overlay,
.mm-world__overlay,
.mm-world__media::before {
  pointer-events: none !important;
}

/* État ouvert = visible */
.header__menu-item--has-mega.is-open .mega,
.header__menu-item--has-mega.is-open .header__mega {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

input::focus{
  box-shadow:none!important;
}



/* 2) Quand un mega-menu est ouvert (ouvre un <details>) → forcer aussi le header en blanc */
.section-header .header-wrapper:has(details[open]),
.section-header .header:has(details[open]) {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* ============================
   Blog – Article card Milia
   ============================ */

.m-article-card-wrapper{
  max-width: 720px;               /* largeur confort, s'adapte grâce au grid */
  margin: 0 auto 80px;
  border-radius: 6px;
  overflow: hidden;
  background:#fff;
}

.m-article-card__title-link,
.m-article-card__media-link{
  display:block;
  font-family:'Campton Medium'!important;
  font-weight:500;
  font-size:24px;
}

.m-article-card__media{
  position:relative;
  width:100%;
}
.m-article-card__media::before{
  content:"";
  display:block;
  padding-bottom:var(--ratio-percent, 140%); /* grand portrait */
}
.m-article-card__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Corps texte */

.m-article-card__body{
  padding:24px 24px 32px;
}

.m-article-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:8px;
  font-family:'Campton Light',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:.65;
}

.m-article-card__date,
.m-article-card__author{
  white-space:nowrap;
}

.m-article-card__title{
  margin:0 0 12px;
font-family:'Campton Medium',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:500;
font-weight:600;
  font-size:28px;
  line-height:1.1;
  letter-spacing:0;
}
.m-article-card__title-link{
  text-decoration:none;
  color:#000;
}
.m-article-card__title-link:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Extrait */

.m-article-card__excerpt{
  margin:0 0 16px;
  font-family:'Campton Light',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px;
  line-height:1.4;
}

/* Footer (badge / nb de commentaires) */


.m-article-card__footer{
  font-family:'Campton Medium',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:500;
  font-size:13px;
  opacity:.75;
}

.m-article-card__badge{
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* Responsive */

@media (max-width: 749px){
  .m-article-card-wrapper{
    margin:0 0 48px;
    border-radius:20px;
  }
  .m-article-card__body{
    padding:20px 16px 24px;
  }
  .m-article-card__title{
    font-size:22px;
  }
  .m-article-card__excerpt{
    font-size:15px;
  }
}



/* ===== HARD FIX bande blanche sticky + marge 10px ===== */

/* On tue tout fond/gradient sur le conteneur sticky de Dawn */
.shopify-section-header-sticky,
.shopify-section-header-sticky::before,
.shopify-section-header-sticky::after,
.section-header.shopify-section-header-sticky,
.section-header.shopify-section-header-sticky::before,
.section-header.shopify-section-header-sticky::after,
.section-header.shopify-section-header-sticky .header-wrapper,
.section-header.shopify-section-header-sticky .header-wrapper::before,
.section-header.shopify-section-header-sticky .header-wrapper::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Pas de padding sur le wrapper quand sticky */
.section-header.shopify-section-header-sticky .header-wrapper{
  padding: 0 !important;
}

/* Le header “verre” quand sticky + 10px du haut */
.section-header.shopify-section-header-sticky.scrolled-past-header .header{
  background: rgba(0,0,0,.22) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 30px;
  margin: 10px 10px 10px !important;  /* 10px du top de la fenêtre */
  padding: 18px 40px;
  box-shadow: none !important;
}

/* RESPONSIVE */ 

/* Fix spécifique "petit desktop" 990–1367px */
@media (min-width: 990px) and (max-width: 1367px){
   .pd-wrap{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  }
 .product__info-wrapper{
    min-width: 0 !important;
    padding-right: clamp(12px, 2vw, 24px)!important;
    padding-left:0px!important;
  }
}

/* Sécurité anti-débordement */
.product__info-wrapper *{
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media(max-width:959px){
h2{
  font-size:25px!important
}
.section-header.shopify-section-header-sticky.scrolled-past-header .header{
  padding:18px 20px!important;
}
.list-menu li{
  padding:30px 0px;
  border-bottom:1px solid #D0D0D0;
}
.m-flavors__item{
  font-size:10px!important;
}
.m-flavors{
  flex-wrap:nowrap!important;
  gap:8px!important
}
  /*.m-card {
    padding: 0px 10px 10px!important;
  }*/
  .m-card__media {
   margin-left: 0!important;
  margin-right: 0!important;
    width: 100%!important;
}
.m-card__cta-add{
  padding:10px; 
  padding-top:0px
}
 .sc-title {
max-width:100%!important;
}
.ps-wrap{
  padding:30px 20px!important;
}
.pd-media{
  position:relative!important;
}
 .pd-thumbs{
  position:absolute!important;
 }
 .pd-thumbs .thumbnail{
  width:50px!important;
  height:50px!important;
 }
 .tc__figure{
  margin:0px!important;
 }
 .m-card__title {
 font-size: 14px !important;
        padding-right: 0px !important;
    }
    #bbft-287 span{
      font-size:11px!important; 
      line-height:1!important;
    }
    #bbft-286{
      padding-top:0px!important; 
      padding-bottom:0px!important;
      padding-left:0px!important
    }
}


/* ===== Header Milia – version FIXED ===== */

/* On fixe TOUT le bloc header pour qu'il reste toujours en haut de la fenêtre */
.section-header.shopify-section-group-header-group{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050 !important;
  pointer-events: none; /* pour que le reste de la page reste cliquable autour */
}

/* Le contenu du header reste cliquable */
.section-header.shopify-section-group-header-group .header-wrapper{
  pointer-events: auto;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* La “pillule” de menu en verre flouté à 10px du haut */
.section-header.shopify-section-group-header-group .header{
  position: relative;
  border-radius: 30px;
  margin: 10px;                 /* => 10px de la fenêtre */
  padding: 18px 40px;
  background-color: rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none !important;
}

/* On désactive le header “sticky blanc” de Dawn */
.shopify-section-header-sticky .section-header,
.shopify-section-header-sticky .section-header .header-wrapper,
.shopify-section-header-sticky .section-header .header{
  position: static;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.product__tax.caption.rte{
  display:none!important;
}

/* Mobile : header un peu plus petit → padding-top adapté */
@media (max-width: 959px){
  .section-header.shopify-section-group-header-group .header{
    margin: 10px;
    padding: 14px 20px;
  }
  .menu-drawer__navigation{
    padding-top:0px!important; 
    background-color:white!important;
  }
  .slider-mobile-gutter{
    padding-bottom: 30px !important;
  }
}

.btg__arrow {
    color: black !important;
}

.mm__aside-media{
  aspect-ratio: 1 / 1 !important;  /* carré parfait */
  height: auto !important;
  width: 100% !important;
}
.mm__aside-media::before{
  content: none !important; /* au cas où une couche Dawn tente d’imposer un ratio */
}
.mm__img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* remplissage propre */
  object-position: center !important;
}

input:focus-visible {
    outline-offset: 0px!important;
    box-shadow:none!important;
}

.toggle,
.product-desc__toggle,
.btg__tab,
.toc-list,
.cat-btn{
  color:#000!important;

}

.mm-badge{
  padding:4px 8px 2px; 
  border-radius:4px; 
  font-family:'Campton Light'!important;
  font-size:10px; 
  top: -5px !important;
    position: relative;
    box-shadow:none;
}

.menu-drawer__menu-item--active, .menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover,
button.menu-drawer__close-button.link.link--text.focus-inset,
.js .menu-drawer__submenu,
.menu-drawer{
  background-color:white!important;
}

.search-modal__content .reset__button {
  display:none!important
}

/*EMPTY CART */

h2.cart__empty-text {
  text-transform: uppercase;
}

p.cart__login-title.h3, 
.cart__login-paragraph{
  font-size:14px!important;
}

#bbft-286{
  padding-top:5px!important; 
  padding-bottom:0px!important; 
  padding-left:0px!important;
}


@media (max-width: 989px){
  #HeaderDrawer-shop-nos-matcha-matcha-cerise::after{
    content:" NEW";
    font-size:0.7rem;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left: 1rem;
    padding: 6px 10px 5px;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 6px;
  background:#f6d7de;
  color:#000;
  position:relative; 
  top:-1px
  }
  .menu-drawer__localization.header-localization{
    display:none!important;
  }
  article.blogix-hero{
    height:45vh!important;
  }
}


@media(max-width:959px){
.mw-cards{
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding:20px
}

.mw-card{
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.mw-card__media{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
}

.mw-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mw-card__body{
  padding: 10px 2px 12px;
}

.mw-card__title{
  font-family: 'Campton Medium', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
}}