/** Shopify CDN: Minification failed

Line 597:1 Expected "}" to go with "{"

**/
.mega-menu {
  position: static;
}

.mega-menu__content {
  background-color: rgb(var(--color-background));
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  left: 0;
  overflow-y: auto;
  padding-bottom: 3rem;
  padding-top: 3rem;
  position: absolute;
  right: 0;
  top: 100%;
}

.shopify-section-header-sticky .mega-menu__content {
  max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);
}

.header-wrapper--border-bottom .mega-menu__content {
  border-top: 0;
}

.js .mega-menu__content {
  opacity: 0;
  transform: translateY(-1.5rem);
}

.mega-menu[open] .mega-menu__content {
  opacity: 1;
  transform: translateY(0);
}

.mega-menu__list {
  display: grid;
  gap: 1.8rem 4rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
}

.mega-menu__link {
  color: rgba(var(--color-foreground), 0.75);
  display: block;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
  padding-bottom: 0.6rem;
  padding-top: 0.6rem;
  text-decoration: none;
  transition: text-decoration var(--duration-short) ease;
  word-wrap: break-word;
}

.mega-menu__link--level-2 {
  font-weight: bold;
}

.header--top-center .mega-menu__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0;
}

.header--top-center .mega-menu__list > li {
  width: 16%;
  padding-right: 2.4rem;
}

.mega-menu__link:hover,
.mega-menu__link--active {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
}

.mega-menu__link--active:hover {
  text-decoration-thickness: 0.2rem;
}

.mega-menu .mega-menu__list--condensed {
  display: block;
}

.mega-menu__list--condensed .mega-menu__link {
  font-weight: normal;
}

/* Titres du menu principal (SHOP / ABONNEMENT) en gras */
.header__menu-item {
  font-weight: 700 !important;
}

/* (probablement inutile, mais on laisse) Titres colonnes via ancien sélecteur */
.header__submenu .list-menu__item:has(> ul) > .header__menu-item {
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
  display: inline-block;
}

/* Titres des colonnes (NOTRE UBE / NOS KITS / ACCESSOIRES) style Milia */
.mega-menu__link--level-2 {
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
  display: inline-block;
  color: rgb(var(--color-foreground)) !important;
}

/* Espacement large façon Milia */
.mega-menu__list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 6rem !important;  /* espace horizontal entre colonnes */
  row-gap: 2.5rem !important;   /* espace vertical si besoin */
  justify-content: center !important;
}

/* Fond blanc premium du méga-menu (style Milia) */
.mega-menu__content {
  background-color: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
  padding-top: 4rem !important;
  padding-bottom: 6rem !important;
  margin-top: 0.8rem !important; /* petit espace sous la barre comme Milia */
  min-height: 380px !important;  /* hauteur minimum premium */
}

/* Effet Milia sur SHOP + barre de séparation avec ABONNEMENT (desktop) */
@media (min-width: 990px) {

  /* Barre verticale entre SHOP et ABONNEMENT */
  .header__inline-menu > li + li {
    position: relative;
    margin-left: 32px;
    padding-left: 32px;
  }

  .header__inline-menu > li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: rgba(0, 0, 0, 0.08); /* séparateur discret */
  }

  /* Etat “ouvert” pour SHOP : trait lila sous le texte, plus de pilule */
  .header__inline-menu details[open] > summary.header__menu-item {
    border-bottom: 2px solid #c6a1e8;  /* trait lila style Laya */
    padding-bottom: 6px;
    border-radius: 0;
    background: transparent;
  }
}
@media (min-width: 990px) {
  /* Transition douce sur la forme de la barre */
  .header-wrapper {
    transition: border-radius 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  }

  /* Quand un mega-menu est ouvert (SHOP), on casse la "pilule" */
  .header-wrapper:has(.mega-menu[open]) {
    border-radius: 0 !important;              /* plus de pilule */
    box-shadow: none !important;              /* on enlève l'ombre de la barre */
    background-color: transparent !important; /* elle se fond dans la page */
  }

  /* Et on colle le panneau blanc au header, comme Milia */
  .header-wrapper:has(.mega-menu[open]) .mega-menu__content {
    margin-top: 0 !important;
    border-radius: 0 0 20px 20px !important;  /* arrondi seulement en bas */
  }
}
/* Retirer le souligné automatique du lien actif dans le menu principal */
.header__menu-item.list-menu__item--active,
.header__menu-item.list-menu__item--active:hover {
  text-decoration: none !important;
}
/* === LAYA — réduire la hauteur de la pillule du header (DESKTOP) === */
@media screen and (min-width: 990px) {

  /* force la hauteur totale de la pillule */
  .header-wrapper {
    height: 60px !important;        /* ajuste la valeur si tu veux encore plus fin */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* neutralise les paddings internes appliqués par Dawn */
  .header {
    height: 100% !important;
    padding: 0 !important;
  }

  /* supprime les marges verticales parasites des trois blocs internes */
  .header__inline-menu,
  .header__heading,
  .header__icons {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
/* === LAYA — Espacer le logo et les icônes sur desktop === */
@media screen and (min-width: 990px) {

  /* espace entre le logo (heading) et les icônes */
  .header__heading {
    margin-right: 600px !important;   /* tu peux mettre 50px si tu veux plus large */
  }

  /* espace interne entre chaque icône */
  .header__icons {
    column-gap: 26px !important;    /* icônes moins collées entre elles */
  }

  /* corrige le centrage de la pillule */
  .header-wrapper {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
/* Police blanche pour le menu DESKTOP uniquement */
@media (min-width: 990px) {
  .header__inline-menu a,
  .header__menu-item {
    color: #ffffff !important;
  }

  /* Flèche blanche du menu ouvert */
  .header__menu-item .icon-caret {
    filter: brightness(0) invert(1) !important;
  }
/* ===== LAYA – Badge Coming Soon en haut à droite (DESKTOP) ===== */
@media (min-width: 990px) {

  /* Abonnement = 2e item */
  .header__inline-menu .list-menu--inline > li:nth-child(2) {
    position: relative; /* permet de positionner le badge absolument */
  }

  /* Badge positionné en haut-droite */
  .header__inline-menu .list-menu--inline > li:nth-child(2)::after {
    content: "COMING SOON";
    position: absolute;
    top: -10px;          /* ajuste la hauteur du badge */
    right: -60px;        /* décalage à droite */
    background:rgba(195, 127, 240, 0.79);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 999px;
    white-space: nowrap;
    z-index: 10;
  }
/* --- Sous-menu en noir --- */
.mega-menu__link,
.mega-menu__link--level-2,
.header__submenu .list-menu__item a {
  color: #000 !important;
}

/* Empêche le hover de devenir blanc/translucide */
.mega-menu__link:hover,
.mega-menu__link--active {
  color: #000 !important;
  text-decoration: underline;
}
    background:rgba(195, 127, 240, 0.79);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 999px;
    white-space: nowrap;
    z-index: 10;
  }
/* --- Sous-menu en noir --- */
.mega-menu__link,
.mega-menu__link--level-2,
.header__submenu .list-menu__item a {
  color: #000 !important;
}

/* Empêche le hover de devenir blanc/translucide */
.mega-menu__link:hover,
.mega-menu__link--active {
  color: #000 !important;
  text-decoration: underline;
}
.mega-menu {
  position: static;
}

.mega-menu__content {
  background-color: rgb(var(--color-background));
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  left: 0;
  overflow-y: auto;
  padding-bottom: 3rem;
  padding-top: 3rem;
  position: absolute;
  right: 0;
  top: 100%;
}

.shopify-section-header-sticky .mega-menu__content {
  max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);
}

.header-wrapper--border-bottom .mega-menu__content {
  border-top: 0;
}

.js .mega-menu__content {
  opacity: 0;
  transform: translateY(-1.5rem);
}

.mega-menu[open] .mega-menu__content {
  opacity: 1;
  transform: translateY(0);
}

.mega-menu__list {
  display: grid;
  gap: 1.8rem 4rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
}

.mega-menu__link {
  color: rgba(var(--color-foreground), 0.75);
  display: block;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
  padding-bottom: 0.6rem;
  padding-top: 0.6rem;
  text-decoration: none;
  transition: text-decoration var(--duration-short) ease;
  word-wrap: break-word;
}

.mega-menu__link--level-2 {
  font-weight: bold;
}

.header--top-center .mega-menu__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0;
}

.header--top-center .mega-menu__list > li {
  width: 16%;
  padding-right: 2.4rem;
}

.mega-menu__link:hover,
.mega-menu__link--active {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
}

.mega-menu__link--active:hover {
  text-decoration-thickness: 0.2rem;
}

.mega-menu .mega-menu__list--condensed {
  display: block;
}

.mega-menu__list--condensed .mega-menu__link {
  font-weight: normal;
}

/* Titres du menu principal (SHOP / ABONNEMENT) en gras */
.header__menu-item {
  font-weight: 700 !important;
}

/* (probablement inutile, mais on laisse) Titres colonnes via ancien sélecteur */
.header__submenu .list-menu__item:has(> ul) > .header__menu-item {
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
  display: inline-block;
}

/* Titres des colonnes (NOTRE UBE / NOS KITS / ACCESSOIRES) style Milia */
.mega-menu__link--level-2 {
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
  display: inline-block;
  color: rgb(var(--color-foreground)) !important;
}

/* Espacement large façon Milia */
.mega-menu__list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 6rem !important;  /* espace horizontal entre colonnes */
  row-gap: 2.5rem !important;   /* espace vertical si besoin */
  justify-content: center !important;
}

/* Fond blanc premium du méga-menu (style Milia) */
.mega-menu__content {
  background-color: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
  padding-top: 4rem !important;
  padding-bottom: 6rem !important;
  margin-top: 0.8rem !important; /* petit espace sous la barre comme Milia */
  min-height: 380px !important;  /* hauteur minimum premium */
}

/* Effet Milia sur SHOP + barre de séparation avec ABONNEMENT (desktop) */
@media (min-width: 990px) {

  /* Barre verticale entre SHOP et ABONNEMENT */
  .header__inline-menu > li + li {
    position: relative;
    margin-left: 32px;
    padding-left: 32px;
  }

  .header__inline-menu > li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: rgba(0, 0, 0, 0.08); /* séparateur discret */
  }

  /* Etat “ouvert” pour SHOP : trait lila sous le texte, plus de pilule */
  .header__inline-menu details[open] > summary.header__menu-item {
    border-bottom: 2px solid #c6a1e8;  /* trait lila style Laya */
    padding-bottom: 6px;
    border-radius: 0;
    background: transparent;
  }
}
@media (min-width: 990px) {
  /* Transition douce sur la forme de la barre */
  .header-wrapper {
    transition: border-radius 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  }

  /* Quand un mega-menu est ouvert (SHOP), on casse la "pilule" */
  .header-wrapper:has(.mega-menu[open]) {
    border-radius: 0 !important;              /* plus de pilule */
    box-shadow: none !important;              /* on enlève l'ombre de la barre */
    background-color: transparent !important; /* elle se fond dans la page */
  }

  /* Et on colle le panneau blanc au header, comme Milia */
  .header-wrapper:has(.mega-menu[open]) .mega-menu__content {
    margin-top: 0 !important;
    border-radius: 0 0 20px 20px !important;  /* arrondi seulement en bas */
  }
}
/* Retirer le souligné automatique du lien actif dans le menu principal */
.header__menu-item.list-menu__item--active,
.header__menu-item.list-menu__item--active:hover {
  text-decoration: none !important;
}
/* === LAYA — réduire la hauteur de la pillule du header (DESKTOP) === */
@media screen and (min-width: 990px) {

  /* force la hauteur totale de la pillule */
  .header-wrapper {
    height: 60px !important;        /* ajuste la valeur si tu veux encore plus fin */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* neutralise les paddings internes appliqués par Dawn */
  .header {
    height: 100% !important;
    padding: 0 !important;
  }

  /* supprime les marges verticales parasites des trois blocs internes */
  .header__inline-menu,
  .header__heading,
  .header__icons {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
/* === LAYA — Espacer le logo et les icônes sur desktop === */
@media screen and (min-width: 990px) {

  /* espace entre le logo (heading) et les icônes */
  .header__heading {
    margin-right: 600px !important;   /* tu peux mettre 50px si tu veux plus large */
  }

  /* espace interne entre chaque icône */
  .header__icons {
    column-gap: 26px !important;    /* icônes moins collées entre elles */
  }

  /* corrige le centrage de la pillule */
  .header-wrapper {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
/* Police blanche pour le menu DESKTOP uniquement */
@media (min-width: 990px) {
  .header__inline-menu a,
  .header__menu-item {
    color:rgb(5, 5, 5) !important;
  }

  /* Flèche blanche du menu ouvert */
  .header__menu-item .icon-caret {
    filter: brightness(0) invert(1) !important;
  }
/* ===== LAYA – Badge Coming Soon en haut à droite (DESKTOP) ===== */
@media (min-width: 990px) {

  /* Abonnement = 2e item */
  .header__inline-menu .list-menu--inline > li:nth-child(2) {
    position: relative; /* permet de positionner le badge absolument */
  }

  /* Badge positionné en haut-droite */
  .header__inline-menu .list-menu--inline > li:nth-child(2)::after {
    content: "COMING SOON";
    position: absolute;
    top: -10px;          /* ajuste la hauteur du badge */
    right: -60px;        /* décalage à droite */
    background:rgba(195, 127, 240, 0.79);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 999px;
    white-space: nowrap;
    z-index: 10;
  }
/* --- Sous-menu en noir --- */
.mega-menu__link,
.mega-menu__link--level-2,
.header__submenu .list-menu__item a {
  color: #000 !important;
}

/* Empêche le hover de devenir blanc/translucide */
.mega-menu__link:hover,
.mega-menu__link--active {
  color: #000 !important;
  text-decoration: underline;
}
/* ===== SUPER FIX — Forcer le texte du mega-menu en noir ===== */
.mega-menu__content {
  --color-foreground: 0, 0, 0 !important; /* remplace la variable en noir */
}
.mega-menu__content a,
.mega-menu__content .mega-menu__link,
.mega-menu__content .mega-menu__link--level-2,
.mega-menu__content .list-menu__item a {
  color: rgb(0, 0, 0) !important;
}