/** Shopify CDN: Minification failed

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

**/
/* ============================
   DAWN – MENU DRAWER (LAYA)
   ============================ */

.header__icon--menu {
  position: initial;
}

/* Overlay clicable derrière le menu */
.js .menu-drawer-container > details > summary::before,
.js .menu-drawer-container > details[open]:not(.menu-opening) > summary::before {
  content: '';
  position: absolute;
  cursor: default;
  width: 100%;
  height: calc(100vh - 100%);
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  top: 100%;
  left: 0;
  background: rgba(var(--color-foreground), 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  transition: opacity 0s, visibility 0s;
}

.js .menu-drawer-container > details[open] > summary::before {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--duration-default) ease, visibility var(--duration-default) ease;
}

.menu-drawer {
  position: absolute;
  transform: translateX(-100%);
  visibility: hidden;
  z-index: 3;
  left: 0;
  top: 100%;
  width: 100%;
  padding: 0;
  background-color: rgb(var(--color-background));
  overflow-x: hidden;
  filter: drop-shadow(
    var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
      rgba(var(--color-shadow), var(--drawer-shadow-opacity))
  );
}

.js .menu-drawer {
  height: calc(100vh - 100%);
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
}

.js details[open] > .menu-drawer,
.js details[open] > .menu-drawer__submenu {
  transition: transform var(--duration-default) ease, visibility var(--duration-default) ease;
}

.js details[open].menu-opening > .menu-drawer,
details[open].menu-opening > .menu-drawer__submenu {
  transform: translateX(0);
  visibility: visible;
}

.js .menu-drawer__navigation .submenu-open {
  visibility: hidden; /* hide menus from screen readers when hidden by submenu */
}

@media screen and (min-width: 750px) {
  .menu-drawer {
    width: 40rem;
    border-width: 0 var(--drawer-border-width) 0 0;
    border-style: solid;
    border-color: rgba(var(--color-foreground), var(--drawer-border-opacity));
  }
}

.menu-drawer__inner-container {
  position: relative;
  height: 100%;
}

.menu-drawer__navigation-container {
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: space-between;
  overflow-y: auto;
  height: 100%;
}

.menu-drawer__navigation {
  padding: 3rem 0;
}

.menu-drawer__inner-submenu {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.js .menu-drawer__menu li {
  margin-bottom: 0.2rem;
}

.menu-drawer__menu-item {
  padding: 1.1rem 3rem;
  text-decoration: none;
  font-size: 1.8rem;
}

.menu-drawer summary.menu-drawer__menu-item {
  padding-right: 5.2rem;
}

.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 {
  color: rgb(var(--color-foreground));
  background-color: rgba(var(--color-foreground), 0.04);
}

.menu-drawer__menu-item--active:hover {
  background-color: rgba(var(--color-foreground), 0.08);
}

.menu-drawer__menu-item > .svg-wrapper {
  width: 15px;
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
}

.js .menu-drawer__submenu {
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: rgb(var(--color-background));
  z-index: 1;
  transform: translateX(100%);
  visibility: hidden;
}

.js .menu-drawer__submenu .menu-drawer__submenu {
  overflow-y: auto;
}

.menu-drawer__close-button {
  margin-top: 1.5rem;
  padding: 1.2rem 2.6rem 1.2rem 3rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  width: 100%;
  background-color: transparent;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  text-align: left;
}

.menu-drawer__close-button .svg-wrapper {
  transform: rotate(180deg);
  margin-right: 1rem;
  width: 15px;
}

.menu-drawer__utility-links {
  padding: 0;
  background-color: rgba(var(--color-foreground), 0.03);
  position: relative;
}

.header--has-social .menu-drawer__utility-links {
  padding: 2rem 3rem;
}

@media screen and (max-width: 749px) {
  .header--has-account:where(:not(.header--has-social):not(.header--has-localizations)) .menu-drawer__utility-links {
    padding: 2rem 3rem;
  }
}

@media screen and (max-width: 989px) {
  .header--has-localizations:where(:not(.header--has-social)) .menu-drawer__utility-links {
    padding: 2rem 3rem;
  }
}

.menu-drawer__account {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 1rem 0;
  font-size: 1.4rem;
  color: rgb(var(--color-foreground));
  margin-bottom: 0;
}

.menu-drawer__utility-links:has(.menu-drawer__localization) .menu-drawer__account {
  margin: 0;
}

.menu-drawer__account account-icon > .svg-wrapper {
  height: 2rem;
  width: 2rem;
  margin-right: 1rem;
}

.menu-drawer__account shop-user-avatar {
  --shop-avatar-size: 2.4rem;
  margin-right: 0.55rem;
  margin-left: -0.45rem;
}

.menu-drawer__account:hover account-icon > .svg-wrapper {
  transform: scale(1.07);
}

.menu-drawer .list-social {
  justify-content: flex-start;
  margin-left: -1.25rem;
}

.menu-drawer .list-social:empty {
  display: none;
}

.menu-drawer .list-social__link {
  padding: 1.1rem 1.1rem;
}

@media screen and (max-width: 749px) {
  .menu-drawer.country-selector-open {
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ============================
   CUSTOM LAYA – STYLE MILIA
   ============================ */

/* 1. Menu mobile pleine largeur + fond blanc */
.menu-drawer {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

.menu-drawer__inner-container {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  padding-left: 1.8rem !important;
  padding-right: 1.8rem !important;
}

/* 2. Lignes séparatrices + typographie des items */
.menu-drawer__menu > li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 1.4rem 0 !important;
  margin: 0 !important;
}

.menu-drawer__menu > li:last-child {
  border-bottom: none !important;
}

.menu-drawer__menu > li > a,
.menu-drawer__menu > li > details > summary {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
  font-size: 16px !important;
  position: relative;
  padding-right: 2rem !important;
}

/* 3. Supprimer les flèches natives (caret + svg) */
.menu-drawer__menu-item .icon-caret,
.menu-drawer__menu-item > .svg-wrapper {
  display: none !important;
}

/* 4. Base : aucune flèche custom sur les items */
.menu-drawer__menu > li > a::after,
.menu-drawer__menu > li > details > summary::after {
  content: '' !important;
}

/* 5. Flèche uniquement sur SHOP (1er item) */
.menu-drawer__menu > li:first-child > a::after,
.menu-drawer__menu > li:first-child > details > summary::after {
  content: '→' !important;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 400;
}

/* 6. Pas de flèche sur ABONNEMENT (2e item) – sécurité */
.menu-drawer__menu > li:nth-child(2) > a::after,
.menu-drawer__menu > li:nth-child(2) > details > summary::after {
  content: '' !important;
}

/* 7. Barre "Connexion" identique, sur fond gris léger */
.menu-drawer__utility-links {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

/* ============================
   LAYA HEADER – PILLULE + LOGO
   ============================ */

/* Logo Laya un peu réduit (desktop + mobile) */
.header__heading-logo {
  max-width: 130px !important;
}

@media screen and (max-width: 749px) {
  .header__heading-logo {
    max-width: 115px !important;
  }
}

/* Pillule plus fine sur mobile mais bien large */
@media screen and (max-width: 749px) {
  .header-wrapper {
    padding: 6px 22px !important;    /* moins haut */
    border-radius: 40px !important;  /* jolie pilule */
    margin: 8px 10px !important;     /* presque toute la largeur */
  }

  .header {
    min-height: 48px !important;
  }

  .header__icons,
  .header__inline-menu,
  .header__heading {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}
/* === LAYA MOBILE – MENU PLEINE PAGE & PILLULE MASQUÉE === */
@media screen and (max-width: 749px) {
  /* Le tiroir recouvre toute la page, depuis le haut */
  .menu-drawer {
    top: 0 !important;
    height: var(--viewport-height, 100vh) !important;
    z-index: 5 !important; /* passe devant la pillule */
  }

  /* On décale un peu le contenu pour respirer sous la barre du haut */
  .menu-drawer__navigation {
    padding-top: 6rem !important;
  }
/* === LAYA MOBILE – menu pleine largeur SOUS la barre Laya === */
@media screen and (max-width: 749px) {
  .menu-drawer {
    /* Le menu commence juste sous le header (la pillule reste visible) */
    top: var(--header-bottom-position, 100%) !important;

    /* Il prend tout le reste de la hauteur */
    height: calc(
      var(--viewport-height, 100vh) - var(--header-bottom-position, 100%)
    ) !important;

    /* Pleine largeur */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  /* On garde un peu d’air en haut du contenu du menu */
  .menu-drawer__navigation {
    padding-top: 2.5rem !important;
  }
.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;
  }

  /* 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;
}
    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;
}
.laya-badge-mobile {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  background: #d7b5ff;
  color: white;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}