/** Shopify CDN: Minification failed

Line 670:11 Unexpected "{"
Line 670:20 Expected ":"
Line 671:11 Unexpected "{"
Line 671:20 Expected ":"
Line 672:11 Unexpected "{"
Line 672:20 Expected ":"
Line 673:11 Unexpected "{"
Line 673:20 Expected ":"
Line 674:11 Unexpected "{"
Line 674:20 Expected ":"
... and 35 more hidden warnings

**/
/* Lien "Découvrir" avec barre qui disparaît au survol */
a[href="/collections"] {
  background: none !important;
  border: none !important;
  color: #fff !important;
  font-weight: 500;
  position: relative;
  text-decoration: none !important;
  padding: 0;
}

a[href="/collections"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transform: scaleX(1); /* barre affichée par défaut */
  transform-origin: left;
  transition: transform 0.3s ease;
}

a[href="/collections"]:hover::after {
  transform: scaleX(0); /* la barre disparaît au hover */
}



/* Barre soulignage animé sur toute la largeur du titre, uniquement pour la section des offres d'appel */
#shopify-section-template--26122817503567__section_jVMrxR .text-block h3 {
  position: relative;
  text-align: center;
  display: inline-block; /* important pour que la barre prenne pile la largeur du texte */
}

#shopify-section-template--26122817503567__section_jVMrxR .text-block h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;            /* espace sous le texte */
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);    /* invisible par défaut */
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* Quand on survole → la barre s’étend sous tout le mot */
#shopify-section-template--26122817503567__section_jVMrxR .text-block:hover h3::after {
  transform: scaleX(1);
}

/* Centrer le contenu texte des offres d'appel au milieu de l'image */
#shopify-section-template--26122817503567__section_jVMrxR .group-block-content {
  position: absolute;          /* détache du flux */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centre parfaitement */
  width: 100%;                 /* occupe toute la largeur */
  display: flex;
  flex-direction: column;
  align-items: center;          /* centre horizontalement */
  justify-content: center;      /* centre verticalement */
  text-align: center;
  padding: 1rem;                /* petit espace respirant */
  z-index: 2;                   /* au-dessus de l’image */
}

/* Si l'image est en background, assure que le parent est positionné */
#shopify-section-template--26122817503567__section_jVMrxR .card--media,
#shopify-section-template--26122817503567__section_jVMrxR .image-card,
#shopify-section-template--26122817503567__section_jVMrxR .banner {
  position: relative;
}

/* --- FORCER LE CENTRAGE SUR BUREAU (DESKTOP) --- */
#shopify-section-template--26122817503567__hero_iyt6zg .hero__content,
#shopify-section-template--26122817503567__hero_iyt6zg .banner__content,
#shopify-section-template--26122817503567__hero_iyt6zg .hero__content-wrapper {
  justify-content: center !important; /* Centre le bloc horizontalement */
  align-items: center !important;     /* Centre le bloc verticalement */
  text-align: center !important;      /* Centre le texte à l'intérieur */
  margin: 0 auto !important;          /* Sécurité supplémentaire */
  left: 0 !important;                 /* Annule les décalages existants */
  right: 0 !important;
  width: 100% !important;             /* Prend toute la largeur */
  max-width: 100% !important;
}

/* ↓ Ajuste le titre "AUTOMNE-HIVER" uniquement sur mobile */
@media (max-width: 749px) {
  /* Hero de la home */
  #shopify-section-template--26122817503567__hero_iyt6zg .custom-typography {
    /* remplace la valeur inline */
    --font-size: clamp(28px, 8.5vw, 40px) !important;
    --line-height: 1.15 !important;
    --letter-spacing: 0 !important;
    text-align: center; /* si tu veux centrer sur mobile */
  }

  /* Sous-titre "NOUVELLE COLLECTION" (h3) */
  #shopify-section-template--26122817503567__hero_iyt6zg .h4,
  #shopify-section-template--26122817503567__hero_iyt6zg h3 {
    font-size: clamp(20px, 4.5vw, 22px) !important;
    line-height: 1.2 !important;
  }

  /* Lien "Découvrir" */
  #shopify-section-template--26122817503567__hero_iyt6zg a {
    font-size: clamp(14px, 3.8vw, 18px) !important;
  }
}

/* Option mobile : un peu moins bas */
@media (max-width: 749px) {
  #shopify-section-template--26122817503567__hero_iyt6zg .hero__content-wrapper {
    padding-bottom: 8vh;
  }
}

/* Section deux colonnes en pleine largeur + pleine hauteur */
#shopify-section-template--26122817503567__section_jVMrxR {
  width: 100vw;
  margin: 0;
  padding: 0;
}

#shopify-section-template--26122817503567__section_jVMrxR .layout-panel-flex {
  width: 100%;
  height: 100vh;      /* occupe la hauteur de l'écran sur desktop */
  display: flex;
  gap: 0 !important;
}

#shopify-section-template--26122817503567__section_jVMrxR .layout-panel-flex > * {
  flex: 1;
  height: 100%;
}

/* Option mobile : Ajustements de la bannière */
@media (max-width: 749px) {
  
  /* 1. Position du contenu (déjà présent) */
  #shopify-section-template--26122817503567__hero_iyt6zg .hero__content-wrapper {
    padding-bottom: 8vh;
  }

  /* 2. NOUVEAU : Réduire la taille du sous-titre (h6) "CHAPITRE 1..." */
  #shopify-section-template--26122817503567__hero_iyt6zg h6,
  #shopify-section-template--26122817503567__hero_iyt6zg .h6 {
      font-size: 10px !important; /* Ajuste ce chiffre selon tes goûts (10px, 11px...) */
      line-height: 1.2 !important;
      letter-spacing: 1px !important; /* Espacement pour la lisibilité */
  }
}

  /* 📱 Mobile fix: remove the black background on the second column text area */
@media (max-width: 749px) {
  /* Work on the whole 2‑columns section */
  #shopify-section-template--26122817503567__section_jVMrxR .group-block,
  #shopify-section-template--26122817503567__section_jVMrxR .group-block-content,
  #shopify-section-template--26122817503567__section_jVMrxR .color-scheme,
  #shopify-section-template--26122817503567__section_jVMrxR .text-block {
    background: transparent !important;
  }

  /* Make sure we don't keep any forced heights from the theme */
  #shopify-section-template--26122817503567__section_jVMrxR .group-block,
  #shopify-section-template--26122817503567__section_jVMrxR .group-block-content {
    height: auto !important;
  }

  /* If the image is set as “arrière‑plan”, make it fill nicely */
  #shopify-section-template--26122817503567__section_jVMrxR .group-block__media-wrapper {
    min-height: 55vh;                 /* visible area for mobile */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent !important;
  }

  /* If it’s a real <img>/<picture>/<video>, make it fill too */
  #shopify-section-template--26122817503567__section_jVMrxR .group-block__media-wrapper picture,
  #shopify-section-template--26122817503567__section_jVMrxR .group-block__media-wrapper img,
  #shopify-section-template--26122817503567__section_jVMrxR .group-block__media-wrapper video {
    display: block;
    width: 100%;
    height: 55vh;
    object-fit: cover;
  }

  /* Tidy the text spacing under the image */
  #shopify-section-template--26122817503567__section_jVMrxR .group-block-content {
    padding: 16px 20px;
    text-align: center;
  }
}

/* Corrige l'espace entre les deux photos en mode mobile */
@media (max-width: 749px) {
  #shopify-section-template--26122817503567__section_jVMrxR .layout-panel-flex {
    flex-direction: column;
    height: auto;
    gap: 0 !important;      /* supprime tout espace entre les colonnes */
  }

  #shopify-section-template--26122817503567__section_jVMrxR .layout-panel-flex > * {
    flex: unset;
    height: auto;
    margin: 0 !important;   /* enlève tout margin */
    padding: 0 !important;  /* enlève tout padding */
  }
}

/* Bouton VOIR TOUT - LES NOUVEAUTES */
.button--AZkhBSWRuTEg3UFpOd__button_98xaJH {
  --size-style-width: auto !important;
  --size-style-width-mobile: auto !important;
  --size-style-width-mobile-min: auto !important;

  display: inline-block;
  padding: 10px 24px;
  font-size: 14px;
  margin: 20px auto;
  text-align: center;

  background: #000;       /* noir */
  color: #fff;            /* texte blanc */
  border: 1px solid #000; /* contour noir */
  border-radius: 6px;
  transition: all 0.3s ease; /* animation douce */
}

/* Effet hover : inverse les couleurs */
.button--AZkhBSWRuTEg3UFpOd__button_98xaJH:hover {
  background: #fff;   /* blanc */
  color: #000;        /* texte noir */
  border-color: #000; /* garde le contour noir */
}

/* Bouton VOIR TOUT - Centré */
.link--AZGJrbWxkUVN1T0NtU__button_JAPptn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;                /* <-- centre horizontalement */
  height: 42px;
  padding: 0 18px;
  border-radius: 6px;
  background: #000 !important;   /* noir par défaut */
  color: #fff !important;        /* texte blanc */
  border: 2px solid #000 !important;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none !important;
  transition: all .25s ease;
}

.link--AZGJrbWxkUVN1T0NtU__button_JAPptn:hover,
.link--AZGJrbWxkUVN1T0NtU__button_JAPptn:focus-visible {
  background: #fff !important;   /* blanc au hover */
  color: #000 !important;        /* texte noir */
  border-color: #000 !important;
}

/* Reset listes */
.js-accordionified > ul, .menu-list, .submenu { list-style: none; margin: 0; padding: 0; }

/* Ligne parent */
.js-accordionified > .submenu-toggle,
.menu-list > li > a {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 14px 4px;
  font-size: 18px; letter-spacing: .02em;
  background: none; border: 0; text-align: left; color: #111; text-decoration: none;
}

/* Sous-menu */
.js-accordionified > ul { padding-left: 10px; border-left: 1px solid #eee; margin-left: 6px; }
.js-accordionified > ul li a { display: block; padding: 12px 4px; font-size: 16px; color: #333; }

/* Animation ouverture/fermeture */
.js-accordionified > ul[hidden] { display: block; max-height: 0; overflow: hidden; padding: 0; border-left-color: transparent; }
.js-accordionified > ul { transition: max-height .28s ease, padding .28s ease, border-color .28s ease; max-height: 600px; }

/* Chevron */
.submenu-toggle .chevron { margin-left: 8px; transition: transform .25s ease; }
.submenu-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* Optionnel : fine séparation entre items au 1er niveau */
.menu-drawer li, .site-nav--mobile li, .Header__Menu li { border-bottom: 1px solid #eee; }

/* Sous-menus : pas de ligne à gauche, ni ombre, ni pseudo-élément */
.menu-drawer .submenu,
.menu-drawer .submenu li {
  border-left: 0 !important;
  border-inline-start: 0 !important; /* si le thème l'utilise */
  box-shadow: none !important;
  background-image: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Kill des lignes ajoutées via ::before/::after */
.menu-drawer .submenu::before,
.menu-drawer .submenu::after,
.menu-drawer .submenu li::before,
.menu-drawer .submenu li::after {
  content: none !important;
  display: none !important;
}

/* Et au cas où une règle globale mettait des traits partout */
.menu-drawer li { border: none !important; }


/* Respect des préférences d’animation */
@media (prefers-reduced-motion: reduce) {
  [id^="shopify-section-"][id*="header"] nav a::after,
  [id^="shopify-section-"][id*="header"] .list-menu a::after,
  [id^="shopify-section-"][id*="header"] .mega-menu a::after,
  .menu-drawer__menu a::after,
  .header-drawer nav a::after,
  .drawer__menu a::after {
    transition: none;
  }
}


/* ===== Footer language selector (Atelier) ===== */

/* Conteneur du sélecteur (ton <form id="CBFooterLocalization">) */
#CBFooterLocalization{
  position: relative;
  display: inline-block;
  padding-bottom: 6px;             /* espace pour la barre animée */
}

/* Barre noire animée (apparition au hover/focus) */
#CBFooterLocalization::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #000;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease;
}
#CBFooterLocalization:hover::after,
#CBFooterLocalization:focus-within::after{
  transform: scaleX(1);
}

/* =========================
   Footer Language Selector — Atelier
   - Icône planète (SVG perso) à gauche
   - Chevron discret à droite
   - Pas de cadre/ombre au focus
   - Baseline grise fixe + underline noir animé au hover/focus
   ========================= */

/* ============== 1) SELECT : reset + icônes + padding ============== */
#CBFooterLocalization select#CBLocLanguage,
#CBFooterLocalization .cb-loc__select{
  font: inherit;
  color: inherit;
  background: transparent;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;

  /* espace réservé aux icônes (gauche : planète / droite : chevron) */
  padding: 2px 26px 2px 30px;

  /* cacher la flèche native */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* deux icônes en background : planète (gauche) + chevron (droite) */
  background-repeat: no-repeat, no-repeat;
  background-position: 8px 50%, calc(100% - 6px) 50%;
  background-size: 16px 16px, 10px 10px;

  /* Icône planète = TON SVG fourni (data-URI, stroke noir pour rendu constant) */
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' class='icon icon-localization' fill='none' viewBox='0 0 24 24'>\
<path d='m15 18 1-2-2.948-1.981-1.943-.124L10 15l2 3h3Z' stroke='%23000' vector-effect='non-scaling-stroke'/>\
<path d='M12.904 2.04A9.993 9.993 0 0 0 2.039 12.903c.414 4.754 4.303 8.643 9.057 9.057a9.993 9.993 0 0 0 10.865-10.865c-.414-4.753-4.303-8.642-9.057-9.057Z' stroke='%23000' vector-effect='non-scaling-stroke'/>\
<path d='M3 7.46 7.75 11l1.178-2.324 4.686-1.17L15 2' stroke='%23000' vector-effect='non-scaling-stroke'/>\
</svg>"),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M8 10l4 4 4-4'/>\
</svg>");
}

/* Edge/IE : retirer la flèche native du select */
#CBFooterLocalization .cb-loc__select::-ms-expand{ display:none; }

/* Au focus clavier, on garde un rendu plat (sans cadre ni glow) */
#CBFooterLocalization select#CBLocLanguage:focus,
#CBFooterLocalization select#CBLocLanguage:focus-visible,
#CBFooterLocalization select#CBLocLanguage:-moz-focusring,
#CBFooterLocalization .cb-loc__select:focus,
#CBFooterLocalization .cb-loc__select:focus-visible,
#CBFooterLocalization .cb-loc__select:-moz-focusring{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-focus-ring-color: transparent;
}

/* ============== 2) CONTENEUR : baseline grise + underline noir animé ============== */
#CBFooterLocalization{
  position: relative;
  display: inline-block;
  padding-bottom: 6px; /* espace sous le texte pour les barres */
}

/* Baseline GRIS (toujours visible), alignée entre la planète et la flèche */
#CBFooterLocalization::before{
  content:"";
  position:absolute;
  left: 30px;   /* commence après l'icône (padding-left du select) */
  right: 26px;  /* s'arrête avant le chevron (padding-right du select) */
  bottom: 0;
  height: 2px;
  background: #D6D1C9; /* gris au repos (ajuste si besoin) */
  pointer-events: none;
}

/* Barre NOIRE animée qui "glisse" (survol / menu ouvert) */
#CBFooterLocalization::after{
  content:"";
  position:absolute;
  left: 30px;
  right: 26px;
  bottom: 0;
  height: 2px;
  background: #000;
  transform: scaleX(0);           /* contractée au repos */
  transform-origin: left center;  /* part de la gauche */
  transition: transform .22s ease;
  pointer-events: none;
}

/* Au survol du conteneur OU quand le select a le focus -> la barre noire s'étend */
#CBFooterLocalization:hover::after,
#CBFooterLocalization:focus-within::after{
  transform: scaleX(1);
}



/* ===== Style du menu déroulant (options) ===== */
#CBFooterLocalization select#CBLocLanguage,
#CBFooterLocalization .cb-loc__select{
  background-color: transparent;  /* le select lui-même reste transparent */
  color: inherit;
}

/* Les options du menu déroulant */
#CBFooterLocalization select#CBLocLanguage option,
#CBFooterLocalization .cb-loc__select option{
  background-color: #F5EFE9;  /* même couleur que ton footer */
  color: #000;                /* texte noir */
  font: inherit;              /* même police que le reste */
  border: none;
  padding: 6px 10px;
}

/* Supprimer le contour bleu quand on ouvre/clic */
#CBFooterLocalization select#CBLocLanguage:focus,
#CBFooterLocalization .cb-loc__select:focus{
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}


/* MOBILE UNIQUEMENT */
@media (max-width: 749px) {
  /* 1) Le titre/entrée du menu ne doit pas occuper 100% de largeur */
  .menu-drawer a,
  .menu-drawer__menu-item > a,
  .menu-drawer__title, 
  .menu-drawer__menu-item--top-level > a {
    display: inline-block !important;   /* largeur = largeur du texte */
    width: auto !important;
  }

  /* 2) Si l’underline animé est fait avec ::after, on le bride à la largeur du texte */
  .menu-drawer a::after,
  .menu-drawer__menu-item > a::after,
  .menu-drawer__title::after,
  .menu-drawer__menu-item--top-level > a::after {
    left: 0;
    right: auto;
    width: 100%;              /* suit la largeur du lien (donc du mot) */
  }

  /* 3) (optionnel) si le texte a un padding horizontal, garde-le côté gauche uniquement */
  .menu-drawer a,
  .menu-drawer__menu-item > a {
    padding-right: 0;         /* évite que la barre dépasse à droite */
  }

  /* 4) Alternative si le thème ignore inline-block : */
  .menu-drawer .menu-item-text,
  .menu-drawer a span {
    display: inline-block;
    inline-size: max-content; /* ou width: max-content; selon le navigateur */
  }
}



@media (max-width: 749px) {
  /* Parent en flex */
  .menu-drawer li.pret-a-porter > a,
  .menu-drawer li.pret-a-porter > summary {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    position: relative;
  }

  /* Neutralise l’underline ::after qui posait souci */
  .menu-drawer li.pret-a-porter > a::after,
  .menu-drawer li.pret-a-porter > summary::after {
    content: none !important;
  }

  /* Flèche SVG */
  .menu-drawer li.pret-a-porter .pret-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform .2s ease;
  }

  .menu-drawer li.pret-a-porter.is-open .pret-chevron {
    transform: rotate(180deg);
  }

  /* Sous-menu */
  .menu-drawer li.pret-a-porter .submenu { display: none; }
  .menu-drawer li.pret-a-porter.is-open .submenu { display: block; }
}




/* Atelier — éviter l’icône “mangée” quand panier vide */
cart-icon.is-empty .cart-bubble,
cart-icon .cart-bubble[hidden] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  pointer-events: none !important;
}



/* Transition fluide sur chaque bloc */
.group-block img {
  transition: transform 0.5s ease, filter 0.3s ease;
}

/* Au survol d’un bloc, zoom uniquement l’image de ce bloc */
.group-block:hover img {
  transform: scale(1.1);
  filter: brightness(1.05); /* petit effet premium */
}

/* Empêche l’image de dépasser */
.group-block .group-block__media-wrapper {
  overflow: hidden;
}

/* Désactiver l’effet sur mobile */
@media (max-width: 768px) {
  .group-block:hover img {
    transform: none !important;
    filter: none !important;
  }
}




/* ---- Appliquer partout où TON titre cloné existe ---- */

/* 1) Quand une carte contient .product-card__title--clone,
      on masque le titre natif généré par le thème */
.product-card:has(.product-card__title--clone) .product-card__content h1,
.product-card:has(.product-card__title--clone) .product-card__content h2,
.product-card:has(.product-card__title--clone) .product-card__content h3,
.product-card:has(.product-card__title--clone) .product-card__content h4,
.product-card:has(.product-card__title--clone) .product-card__content h5,
.product-card:has(.product-card__title--clone) .product-card__content h6,
.product-card:has(.product-card__title--clone) .product-card__content .card__heading,
.product-card:has(.product-card__title--clone) .product-card__content .product-card__title,
.product-card:has(.product-card__title--clone) .product-card__content .full-unstyled-link,
.product-card:has(.product-card__title--clone) .product-card__content [ref="productTitleLink"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 2) Mise en forme de ta rangée Titre + Prix partout */
.product-card:has(.product-card__title--clone) .meta-row {
  display: grid;
  grid-template-columns: 1fr auto; /* Titre à gauche, Prix à droite */
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}
.product-card:has(.product-card__title--clone) .price-row { margin: 0; }

/* 3) Couper les libellés incrustés via aria-label sur la galerie (si présents) */
.product-card:has(.product-card__title--clone) .card-gallery [ref="cardGalleryLink"][aria-label]::before,
.product-card:has(.product-card__title--clone) .card-gallery [ref="cardGalleryLink"][aria-label]::after,
.product-card:has(.product-card__title--clone) .card-gallery::before,
.product-card:has(.product-card__title--clone) .card-gallery::after {
  content: none !important;
}

/* 4) (Option) si tu veux aussi cacher les flèches de TOUT carrousel resource-list */
.resource-list__carousel .slideshow-arrows,
.resource-list__carousel [data-direction="prev"],
.resource-list__carousel [data-direction="next"] {
  display: none !important;
}

.product-card .card-price { font-weight: 400 !important; }
.product-card .card-price.is-soldout { font-weight: 400 !important }


/* ===== Supprimer tous les traits sur mobile ===== */
@media (max-width: 768px) {
  #footer-{{ section.id }} .cb-col,
  #footer-{{ section.id }} .cb-acc,
  #footer-{{ section.id }} .cb-acc *,
  #footer-{{ section.id }} .cb-columns,
  #footer-{{ section.id }} .cb-bottom {
    border: none !important;
    box-shadow: none !important;
  }

  /* Espacement propre entre les sections */
  #footer-{{ section.id }} .cb-col {
    margin: 0;
    padding: 0;
  }

  /* Titre + flèche */
  #footer-{{ section.id }} .cb-acc-title {
    padding: 18px 0;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #footer-{{ section.id }} .cb-acc-title::-webkit-details-marker {
    display: none;
  }

  /* Chevron animé (bas ↔ haut) */
  #footer-{{ section.id }} .cb-acc-title::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #111;
    border-bottom: 2px solid #111;
    transform: rotate(45deg);
    transition: transform .25s ease;
    flex-shrink: 0;
  }
  #footer-{{ section.id }} .cb-acc[open] .cb-acc-title::after {
    transform: rotate(-135deg);
  }

  /* Animation du contenu */
  #footer-{{ section.id }} .cb-links {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease, opacity .3s ease;
  }
  #footer-{{ section.id }} .cb-acc[open] .cb-links {
    max-height: 500px;
    opacity: 1;
    padding: 8px 0 16px 0;
  }
}


/* --- TAPIS ROULANT FINAL (PC: HOVER / MOBILE: GLISSER) --- */

@keyframes tapis-roulant-infini {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* 1. La "fenêtre" (commun à PC et mobile) */
#shopify-section-template--26122817503567__product_list_xdV7r6 .tapis-roulant-viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* 2. La "piste" (commun à PC et mobile) */
#shopify-section-template--26122817503567__product_list_xdV7r6 .tapis-roulant-piste {
  display: flex;
  width: max-content;
}

/* 3. Chaque produit (commun à PC et mobile) */
#shopify-section-template--26122817503567__product_list_xdV7r6 .tapis-roulant-item {
  flex-shrink: 0;
  width: 280px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* 4. Comportement UNIQUEMENT POUR PC (écrans de 991px et plus) */
@media (min-width: 991px) {
  /* On lance l'animation automatique */
  #shopify-section-template--26122817503567__product_list_xdV7r6 .tapis-roulant-piste {
    animation: tapis-roulant-infini 30s linear infinite;
  }
  
  /* LA CORRECTION EST ICI : On met en pause au survol */
  #shopify-section-template--26122817503567__product_list_xdV7r6 .tapis-roulant-viewport:hover .tapis-roulant-piste {
    animation-play-state: paused;
  }
}

/* 5. Comportement UNIQUEMENT POUR MOBILE (pour le glissement) */
@media (max-width: 990px) {
    #shopify-section-template--26122817503567__product_list_xdV7r6 .tapis-roulant-viewport {
        cursor: grab; /* On indique qu'on peut attraper */
    }
}

/* --- EFFET ZOOM GLOBAL SUR TOUTES LES IMAGES PRODUIT (PC UNIQUEMENT) --- */

/* On n'applique cet effet que sur les écrans larges (ordinateurs) */
@media (min-width: 990px) {

  /* 1. On cible le conteneur de l'image de N'IMPORTE QUELLE carte produit.
     On lui dit de cacher tout ce qui dépasse pour un zoom "propre".
     On ajoute plusieurs sélecteurs courants pour être sûr de couvrir tous les cas. */
  .product-card .product-card-gallery,
  .card--product .card__media {
    overflow: hidden;
  }

  /* 2. On prépare TOUTES les images à l'intérieur des cartes produits pour une transition douce. */
  .product-card img {
    transition: transform 0.4s ease-out; /* Animation plus douce */
  }

  /* 3. L'ACTION : Quand on survole N'IMPORTE QUELLE carte produit... */
  .product-card:hover img {
    /* ...on zoome l'image qui est à l'intérieur. */
    transform: scale(1.08); /* 1.08 est un zoom subtil et élégant */
  }

}



/* --- Splash Screen "INCERTAINES" - Animation Texte Améliorée --- */

//* --- Masquage des spinners de transition rapides --- */

/* 1. Cache le cercle blanc de chargement (le spinner lui-même) */
.page-transition-loader,
.loader-spinner,
.spinner-animation {
    display: none !important;
}

/* 2. Empêche l'affichage d'une potentielle barre de progression ou d'un overlay de chargement */
.loading-bar,
.page-transition-overlay,
.is-loading-overlay {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 3. Cible spécifique au thème Atelier si l'icône est un ::before sur le body */
/* CELA EST TRÈS AGRESSIF MAIS SOUVENT NÉCESSAIRE */
body.page-width::before {
    display: none !important;
}



/* --- Splash Screen "INCERTAINES" --- */
#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* La valeur '3s' est remplacée par '3.8s' pour un délai de maintien de 2s après l'animation */
   transition: opacity 0.6s ease-out 0s, visibility 0.6s ease-out 0s; /* Ancien 3.0s */
}


#splash-screen.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Gardez ce bloc tel quel, il ne devrait pas bouger */
.splash-text {
  font-family: Arial, sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  color: transparent;
  text-transform: uppercase;
  position: relative; /* TRÈS IMPORTANT : L'ancre pour les éléments absolus */
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* --- Effet d'écriture du contour (::before) --- */
.splash-text::before {
  content: "INCERTAINES";
  position: absolute;
  top: 0;
  left: 50%; /* Positionne le point de départ au milieu du parent */
  transform: translateX(-50%); /* Décale l'élément de 50% de SA PROPRE largeur vers la gauche */
  color: transparent;
  -webkit-text-stroke: 1.5px #ffffff;
  text-stroke: 1.5px #ffffff;
  clip-path: inset(0 100% 0 0);
  animation: writeTextStroke 2s ease-out forwards;
}

/* --- Effet de remplissage des lettres (::after) --- */
.splash-text::after {
  content: "INCERTAINES";
  position: absolute;
  top: 0;
  left: 50%; /* Positionne le point de départ au milieu du parent */
  transform: translateX(-50%); /* Décale l'élément de 50% de SA PROPRE largeur vers la gauche */
  color: #ffffff;
  clip-path: inset(0 100% 0 0);
  animation: revealTextFill 1.5s ease-out 1.5s forwards;
}

/* --- Les Keyframes --- */

/* Animation d'écriture progressive (contour) */
@keyframes writeTextStroke {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); } /* Révèle tout le texte */
}

/* Animation de remplissage (couleur blanche) */
@keyframes revealTextFill {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

/* --- Ajustement pour les petits écrans --- */
@media (max-width: 768px) {
  .splash-text {
    font-size: clamp(2rem, 10vw, 4rem);
    letter-spacing: 0.05em;
  }
}

/* --- Cacher l'icône "Compte" sur mobile --- */
@media (max-width: 749px) {
  
  /* On cible très précisément le lien de l'icône "compte" */
  .header-actions__action.account-button {
    display: none !important;
  }

}



/* Style du titre "MENU" (OK) */
.menu-drawer__header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  padding-left: var(--drawer-padding) !important;
  padding-right: var(--drawer-padding) !important;
  padding-top: 0.7rem !important;
  padding-bottom: 2.0rem !important; /* Espace sous "MENU" (OK) */
}

.menu-drawer__title {
  grid-column: 2 / 3 !important;
  text-align: center !important;
  font-size: 1.2rem !important;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 !important;
}

.menu-drawer__header .menu-drawer__close-button {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  justify-self: start !important;
  padding: 0 !important;
  position: relative !important;
}

/* Cache la barre de défilement horizontale (OK) */
.menu-drawer {
  overflow-x: hidden !important;
}

/* === BLOC MODIFIÉ : Espacement du menu principal (NOUVEAUTÉS, etc.) === */
/* Cible uniquement les liens principaux */
.menu-drawer__navigation .menu-drawer__menu-item--mainlist {
  font-size: 1.0rem !important;
  padding-top: 0.8rem !important; /* Grand espacement (OK) */
  padding-bottom: 0.8rem !important;
}

/* === NOUVEAU BLOC : Espacement réduit pour les sous-menus (Blousons, etc.) === */
/* Cible uniquement les liens enfants */
.menu-drawer__navigation .menu-drawer__menu-item--child {
  font-size: 1.0rem !important;
  padding-top: 0.5rem !important; /* Petit espacement */
  padding-bottom: 0.5rem !important;
}
/* === FIN DES MODIFICATIONS === */


/* Conteneur beige "Mon Compte" (OK) */
.menu-drawer__utility-links {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 1 !important;
  background-color: #F5EFE9 !important;
  border-top: none !important;
  margin-inline: calc(var(--drawer-padding, 2rem) * -1) !important;
  margin-bottom: 0 !important; 
}

/* Pas de puce (OK) */
.menu-drawer__utility-links .menu-drawer__utility-list > li {
   list-style: none !important;
   margin: 0 !important;
   padding: 0 !important;
}

/* Lien "Mon Compte" (OK) */
.menu-drawer__utility-links .menu-drawer__utility-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  color: #000000 !important;
  font-size: 1.0rem !important;
  gap: 1.2rem !important;
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}

/* Icône "Mon Compte" (OK) */
.menu-drawer__utility-links .menu-drawer__utility-link svg {
  color: #000000 !important; 
  stroke: #000000 !important;
  fill: none !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
}

/* Texte "Mon Compte" (OK) */
.menu-drawer__utility-links .menu-drawer__utility-link span {
  color: #000000 !important;
  font-size: inherit !important;
}


/* Hide-on-down / Show-on-up — Desktop */
@media (min-width: 990px) {
  #header-component[sticky='scroll-up'][data-sticky-state='active'] .header__row {
    transition: transform .25s ease;
    will-change: transform;
  }
  /* On descend => le header sort vers le haut */
  #header-component[sticky='scroll-up'][data-sticky-state='active'][data-scroll-direction='down'] .header__row {
    transform: translateY(-100%);
  }
  /* On remonte => le header revient */
  #header-component[sticky='scroll-up'][data-sticky-state='active'][data-scroll-direction='up'] .header__row {
    transform: translateY(0);
  }
}





/* --- AMÉLIORATION DU MEGA-MENU (SOLUTION 17 - SOULIGNEMENT SOUS-MENU) --- */

/* N'applique tout ce code que sur les écrans larges (desktop) */
@media screen and (min-width: 990px) {

  /* 0. Conteneur principal */
  .mega-menu {
    border-top: 1px solid #e0e0e0 !important; 
    padding-top: 20px !important; 
    padding-bottom: 30px !important; 
  }

  /* 1. Cible la GRILLE (la liste 'ul') */
  .mega-menu__list {
    display: flex !important; 
    justify-content: center !important; 
    flex-wrap: wrap; 
    gap: 20px; 
  }

/* 2. Cible la COLONNE (le 'li') - ANIMATION RALENTIE */
  .mega-menu__column {
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    position: relative; 
    
    /* ÉTAT INITIAL (invisible) */
    opacity: 0;
    transform: translateY(10px);
    
    /* VITESSE de l'animation (RALENTIE) */
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  /* 3. Cible le LIEN (le 'a') */
  .mega-menu__link {
    position: relative; 
    display: block; 
    text-decoration: none;
    width: 400px;  
    height: 500px; 
    overflow: hidden; 
  }

  /* 4. L'image */
  .mega-menu__link-image {
    display: block; 
    width: 100%;  
    height: 100%; 
    object-fit: cover; 
    object-position: center; 
    filter: brightness(0.7); 
    transition: filter 0.3s ease; 
  }

  /* 5. Style le TITRE (le span) - MODIFIÉ */
  .mega-menu__link-title {
    position: absolute; 
    bottom: 20px; /* Garde la position 'plus haut' */
    
    /* NOUVEAU: Centrage et largeur auto */
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* Largeur auto basée sur le texte */
    display: inline-block; /* Nécessaire pour width: auto */

    color: #ffffff !important; 
    padding: 10px; /* Garde le padding */
    
    text-transform: uppercase;
    letter-spacing: 0.05em; 
    font-size: 0.9rem; 
    padding-top: 10px; 
    font-weight: 700; 
  }

  /* 5b. NOUVEAU : Le trait sous le titre */
  .mega-menu__link-title::after {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    bottom: 0px; /* En bas du span (dans le padding) */
    width: 100%; /* 100% de la largeur du span (qui est auto) */
    height: 2px;
    background-color: #FFF; /* Trait blanc */
    
    transform: scaleX(0); /* Caché par défaut */
    transform-origin: center;
    transition: transform 0.3s ease;
  }
  
  /* 5c. NOUVEAU : Affiche le trait au survol du LIEN */
  .mega-menu__link:hover .mega-menu__link-title::after {
    transform: scaleX(1); /* Affiche le trait */
  }

  /* 6. BONUS : Effet au survol */
  .mega-menu__link:hover .mega-menu__link-image {
    filter: brightness(1); 
  }

/* 7. DÉCLENCHEMENT de l'animation (CORRIGÉ) */
  /* Quand on survole le lien principal ("COLLECTION")... */
  /* (On utilise la classe .menu-list__list-item que tu as trouvée) */
  .menu-list__list-item:hover .mega-menu__column {
    /* ...les colonnes deviennent visibles. */
    opacity: 1;
    transform: translateY(0);
  }
  
/* 8. DÉCALAGE de l'animation (RALENTI) */
  /* On applique un DÉLAI (transition-delay) à chaque item */
  .menu-list__list-item:hover .mega-menu__column:nth-child(1) {
    transition-delay: 0.2s; /* Avant 0.1s */
  }
  .menu-list__list-item:hover .mega-menu__column:nth-child(2) {
    transition-delay: 0.4s; /* Avant 0.2s */
  }
  .menu-list__list-item:hover .mega-menu__column:nth-child(3) {
    transition-delay: 0.6s; /* Avant 0.3s */
  }
  



/* --- AMÉLIORATION DU MEGA-MENU (SOLUTION 26 - FOCUS MOINS CLAIR) --- */

/* N'applique ce code que sur les écrans larges (desktop) */
@media screen and (min-width: 990px) {

  /* 1. Force TOUS les liens à être 100% opaques (sombres) par défaut. */
  .overflow-menu .menu-list__link {
    opacity: 1 !important; 
    transition: opacity 0.3s ease;
  }
  
  /* 2. Quand on survole TOUTE la liste (le .overflow-menu)... */
  .overflow-menu:hover .menu-list__link {
    /* ...on force tous les liens à devenir MOINS clairs */
    opacity: 0.7 !important; /* J'ai mis 0.4 (plus visible) */
  }
  
  /* 3. ...MAIS le 'li' qu'on survole... */
  .overflow-menu .menu-list__list-item:hover > .menu-list__link {
    /* ...son lien redevient 100% opaque. */
    opacity: 1 !important;
  }
  
  /* 4. Garde aussi le lien "actif" (page actuelle) 100% opaque */
  .overflow-menu .menu-list__list-item.menu-list__list-item--active > .menu-list__link,
  .overflow-menu .menu-list__link[aria-current="page"] {
     opacity: 1 !important;
  }

}





/* --- STYLE POUR LE MEGA MENU SHOP (COLONNES TEXTE) --- */

@media screen and (min-width: 990px) {
  
  /* Conteneur des 3 colonnes */
  .shop-mega-menu-columns-wrapper {
    display: flex;
    justify-content: space-around; 
    padding: 30px 20px; 
    width: 100%; 
  }

  /* Style de chaque colonne */
  .shop-mega-menu-column {
    flex: 1; 
    padding: 0 20px; 
    max-width: 30%; 
    
  }
  .shop-mega-menu-column:last-child {
      border-right: none;
  }

  /* Style du titre de colonne */
  .shop-mega-menu-title {
    font-weight: bold;
    margin-bottom: 20px; 
    padding-bottom: 10px;

    text-transform: uppercase;
    letter-spacing: 0.08em; 
    font-size: 1rem; 
    color: #000; 
  }

  /* Style de la liste de liens */
  .shop-mega-menu-sublist {
    margin: 0;
    padding: 0;
  }
  .shop-mega-menu-sublist li {
    margin-bottom: 12px; 
  }

  /* Style de chaque lien (<a>) */
  .shop-mega-menu-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #555; 
    transition: color 0.2s ease;
    font-size: 0.9rem; 
    /* position: relative; */ /* ENLEVÉ */
    /* padding-bottom: 3px; */ /* ENLEVÉ */
  }
  .shop-mega-menu-link:hover {
    color: #000; 
  }
  
  /* --- MODIFICATIONS POUR LE TRAIT SOUS LE TEXTE --- */

  /* Style du texte du lien (<span>) */
  .shop-mega-menu-text {
    position: relative; /* NOUVEAU: Référence pour le trait */
    padding-bottom: 3px; /* NOUVEAU: Espace pour le trait */
    display: inline-block; /* NOUVEAU: Pour que la largeur s'adapte au texte */
  }

  /* NOUVEAU : Crée le trait sous le TEXTE */
  .shop-mega-menu-text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; /* Prend 100% de la largeur du SPAN */
    height: 1px; /* Trait fin */
    background-color: #000; /* Noir */
    transform: scaleX(0); /* Caché par défaut */
    transform-origin: left; /* Animation de gauche à droite */
    transition: transform 0.3s ease;
  }
  
  /* NOUVEAU : Affiche le trait quand on survole le LIEN (<a>) */
  .shop-mega-menu-link:hover .shop-mega-menu-text::after {
    transform: scaleX(1);
  }

  /* --- FIN DES MODIFICATIONS --- */

  /* Style pour le lien "Tout voir" */
   .shop-mega-menu-link--see-all {
      margin-top: 20px;
      font-weight: bold;
      color: #000;
      /* padding-bottom: 0; */ /* Pas besoin si le trait est sur le span */
   }
   /* Cache l'icône pour "Tout voir" */
   .shop-mega-menu-link--see-all .shop-mega-menu-icon {
       display: none; 
   }
   /* NOUVEAU : Empêche le trait sur le span de "Tout voir" */
   .shop-mega-menu-link--see-all .shop-mega-menu-text::after {
       display: none !important;
   }


  /* Style de l'icône */
  .shop-mega-menu-icon {
    display: inline-block;
    width: 16px; 
    height: 16px;
    margin-right: 10px; 
    flex-shrink: 0; 
  }
  .shop-mega-menu-icon svg {
     display: block;
     width: 100%;
     height: 100%;
     fill: currentColor; 
  }

}




/* ================================================= */
/* DÉCALAGE EXCLUSIF FAQ (300px) */
/* Cible l'élément qui définit la largeur maximale sur la page FAQ */
/* ================================================= */

main[data-template="page.faq"] .section--page-width {
    /* Augmente la marge gauche et droite de 300px */
    padding-left: 300px !important;
    padding-right: 300px !important;
    
    /* Assure que la zone de contenu s'étende si nécessaire */
    max-width: none !important; 
    width: 100% !important;
}

/* ================================================= */
/* RÈGLE SPÉCIFIQUE MOBILE (Garder la lisibilité) */
/* ================================================= */
@media screen and (max-width: 768px) {
    main[data-template="page.faq"] .section--page-width {
        /* Décalage réduit pour le mobile */
        padding-left: 20px !important; 
        padding-right: 20px !important;  
    }
}






/* 1. Fond transparent (au repos) */
body:has(main[data-template="index"]) header-component:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) {
  background-color: transparent !important;
  border-bottom: none !important;
}
body:has(main[data-template="index"]) header-component:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .header__row {
  background-color: transparent !important;
}

/* 2. Texte du Menu (en blanc, au repos) */
body:has(main[data-template="index"]) header-component:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .menu-list__list-item > a.menu-list__link {
  color: #FFFFFF !important;
}

/* 3. Icônes et texte divers (en blanc, au repos) */
body:has(main[data-template="index"]) header-component:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .header-actions__action,
body:has(main[data-template="index"]) header-component:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .search-modal__button,
body:has(main[data-template="index"]) header-component:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .localization-form__select,
body:has(main[data-template="index"]) header-component:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .icon-caret {
  color: #FFFFFF !important;
}

/* 4. Icônes "Contour" (Panier, Compte, Recherche) en BLANC (au repos) */
body:has(main[data-template="index"]) header-component:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .search-modal__button svg,
body:has(main[data-template="index"]) header-component:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .account-button svg,
body:has(main[data-template="index"]) header-component:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) cart-icon svg {
  fill: none !important;
  stroke: #FFFFFF !important;
}

/* 5. Icône "Pleine" (Menu Burger) en BLANC (au repos) */
body:has(main[data-template="index"]) header-component:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .header__icon--menu svg {
  fill: #FFFFFF !important; 
  stroke: #FFFFFF !important;
}

/* 6. Logo (Image) (en blanc, au repos) */
body:has(main[data-template="index"]) header-component:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .header-logo__image {
  filter: invert(1) brightness(2) !important; 
}



/*
 * ==========================================================
 * ETAT 2 : HEADER "OUVERT" (PAGE D'ACCUEIL) - AVEC ID
 * ==========================================================
*/

/* 1. Fond BLANC pour le header LUI-MÊME (menu ouvert) */
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(details[open]),
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(.menu-list__link[aria-expanded="true"]) {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E9E9E9 !important;
}
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(details[open]) .header__row,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(.menu-list__link[aria-expanded="true"]) .header__row {
    background-color: #FFFFFF !important;
}

/* 2. Texte du Menu (en noir, menu ouvert) */
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(details[open]) .menu-list__list-item > a.menu-list__link,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(.menu-list__link[aria-expanded="true"]) .menu-list__list-item > a.menu-list__link {
    color: #000000 !important;
}

/* 3. Icônes et texte divers (en noir, menu ouvert) */
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(details[open]) .header-actions__action,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(details[open]) .search-modal__button,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(details[open]) .localization-form__select,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(details[open]) .icon-caret,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(.menu-list__link[aria-expanded="true"]) .header-actions__action,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(.menu-list__link[aria-expanded="true"]) .search-modal__button,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(.menu-list__link[aria-expanded="true"]) .localization-form__select,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(.menu-list__link[aria-expanded="true"]) .icon-caret {
    color: #000000 !important;
}

/* 4. Icônes "Contour" (Panier, Compte, Recherche) en NOIR (menu ouvert) */
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(details[open]) .search-modal__button svg,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(details[open]) .account-button svg,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(details[open]) cart-icon svg,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(.menu-list__link[aria-expanded="true"]) .search-modal__button svg,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(.menu-list__link[aria-expanded="true"]) .account-button svg,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(.menu-list__link[aria-expanded="true"]) cart-icon svg {
    fill: none !important;
    stroke: #000000 !important;
}

/* 5. Icône "Pleine" (Menu Burger) en NOIR (menu ouvert) */
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(details[open]) .header__icon--menu svg,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(.menu-list__link[aria-expanded="true"]) .header__icon--menu svg {
    fill: #000000 !important;
    stroke: #000000 !important;
}

/* 6. Logo (Image) (en noir, menu ouvert) */
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(details[open]) .header-logo__image,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section header-component:has(.menu-list__link[aria-expanded="true"]) .header-logo__image {
    filter: none !important; /* Annule l'inversion */
}

/*
 * ==========================================================
 * SECTION 3 : CONTENU DES MENUS (SÉCURITÉ) - AVEC ID
 * ==========================================================
*/
body[data-template="index"] #shopify-section-sections--26122817798479__header_section details[open] .menu-drawer,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section #header-component .menu-list__submenu {
  background-color: #FFFFFF !important;
}

/* Correction de votre bug initial (texte de menu blanc sur blanc) */
body[data-template="index"] #shopify-section-sections--26122817798479__header_section details[open] .menu-drawer .menu-drawer__title,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section details[open] .menu-drawer .menu-drawer__menu-item-text,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section details[open] .menu-drawer .menu-drawer__utility-link,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section #header-component .menu-list__submenu .shop-mega-menu-title,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section #header-component .menu-list__submenu .shop-mega-menu-text,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section #header-component .menu-list__submenu .mega-menu__link-title,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section #header-component .menu-list__submenu .shop-mega-menu-link--see-all {
  color: #000 !important;
}

body[data-template="index"] #shopify-section-sections--26122817798479__header_section details[open] .menu-drawer .icon,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section details[open] .menu-drawer svg,
body[data-template="index"] #shopify-section-sections--26122817798479__header_section #header-component .menu-list__submenu .shop-mega-menu-icon svg {
  fill: #000000 !important; 
  stroke: #000000 !important; 
}



/*
 * ==========================================================
 * SECTION 4 : FIX DROPDOWN (AUTRES PAGES)
 * Force le contenu des menus en NOIR sur FOND BLANC
 * sur TOUTES LES AUTRES PAGES.
 * ==========================================================
*/

/* 1. Fond BLANC pour les menus (autres pages) */
body:not(:has(main[data-template="index"])) details[open] .menu-drawer,
body:not(:has(main[data-template="index"])) #header-component .menu-list__submenu {
  background-color: #FFFFFF !important;
}

/* 2. Texte NOIR pour les menus (autres pages) */
body:not(:has(main[data-template="index"])) details[open] .menu-drawer .menu-drawer__title,
body:not(:has(main[data-template="index"])) details[open] .menu-drawer .menu-drawer__menu-item-text,
body:not(:has(main[data-template="index"])) details[open] .menu-drawer .menu-drawer__utility-link,
body:not(:has(main[data-template="index"])) #header-component .menu-list__submenu .shop-mega-menu-title,
body:not(:has(main[data-template="index"])) #header-component .menu-list__submenu .shop-mega-menu-text,
body:not(:has(main[data-template="index"])) #header-component .menu-list__submenu .mega-menu__link-title,
body:not(:has(main[data-template="index"])) #header-component .menu-list__submenu .shop-mega-menu-link--see-all {
  color: #FFFFFF !important;
}

/* 3. Icônes NOIR (autres pages) */
body:not(:has(main[data-template="index"])) details[open] .menu-drawer .icon,
body:not(:has(main[data-template="index"])) details[open] .menu-drawer svg,
body:not(:has(main[data-template="index"])) #header-component .menu-list__submenu .shop-mega-menu-icon svg {
  fill: #000000 !important; 
  stroke: #000000 !important; 
}



/*
 * ==========================================================
 * ETAT 3 : HEADER "STICKY" (AU SCROLL, MENU FERMÉ)
 * LA VRAIE CORRECTION
 * ==========================================================
*/

/* 1. Fond BLANC (au scroll) */
body:has(main[data-template="index"]) header-component[data-sticky-state="active"]:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E9E9E9 !important;
}
body:has(main[data-template="index"]) header-component[data-sticky-state="active"]:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .header__row {
  background-color: #FFFFFF !important;
}

/* 2. Texte du Menu (en noir, au scroll) */
body:has(main[data-template="index"]) header-component[data-sticky-state="active"]:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .menu-list__list-item > a.menu-list__link {
  color: #000000 !important;
}

/* 3. Icônes et texte divers (en noir, au scroll) */
body:has(main[data-template="index"]) header-component[data-sticky-state="active"]:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .header-actions__action,
body:has(main[data-template="index"]) header-component[data-sticky-state="active"]:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .search-modal__button,
body:has(main[data-template="index"]) header-component[data-sticky-state="active"]:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .localization-form__select,
body:has(main[data-template="index"]) header-component[data-sticky-state="active"]:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .icon-caret {
  color: #000000 !important;
}

/* 4. Icônes "Contour" (Panier, Compte, Recherche) en NOIR (au scroll) */
body:has(main[data-template="index"]) header-component[data-sticky-state="active"]:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .search-modal__button svg,
body:has(main[data-template="index"]) header-component[data-sticky-state="active"]:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .account-button svg,
body:has(main[data-template="index"]) header-component[data-sticky-state="active"]:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) cart-icon svg {
  fill: none !important;
  stroke: #000000 !important;
}

/* 5. Icône "Pleine" (Menu Burger) en NOIR (au scroll) */
body:has(main[data-template="index"]) header-component[data-sticky-state="active"]:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .header__icon--menu svg {
  fill: #000000 !important; 
  stroke: #000000 !important;
}

/* 6. Logo (Image) (en noir, au scroll) */
body:has(main[data-template="index"]) header-component[data-sticky-state="active"]:not(:has(details[open])):not(:has(.menu-list__link[aria-expanded="true"])) .header-logo__image {
  filter: none !important; /* Annule l'inversion pour afficher le logo normal */
}







/* === SOLUTION GRILLE 50/50 LOUIS VUITTON === */

@media screen and (min-width: 990px) {

  /* 1. ON FORCE LE CONTENEUR PRINCIPAL EN PLEIN ÉCRAN */
  .product-section, 
  .page-width, 
  .product-information {
      max-width: 100vw !important;
      width: 100vw !important;
      padding: 0 !important;
      margin: 0 !important;
  }

  /* 2. ON CRÉE UNE GRILLE STRICTE : 50% IMAGE | 50% TEXTE */
  .product-information__grid {
      display: grid !important;
      /* La ligne magique : 2 colonnes de 50% de la vue (viewport width) */
      grid-template-columns: 50vw 50vw !important; 
      width: 100vw !important;
      gap: 0 !important;
      margin: 0 !important;
  }

  /* 3. COLONNE GAUCHE (IMAGE) */
  .product-information__media, 
  .product__media-wrapper {
      width: 100% !important; /* Remplit sa case de grille */
      max-width: none !important;
      padding: 0 !important;
  }

  /* L'IMAGE ELLE-MÊME */
  .product__media img,
  .media-gallery img {
      width: 100% !important;
      height: 100vh !important; /* Prend toute la hauteur de l'écran */
      object-fit: cover !important;
      max-width: none !important;
  }

  /* 4. COLONNE DROITE (INFO) */
  .product-details, 
  .product__info-wrapper {
      width: 100% !important; /* Remplit sa case de grille */
      max-width: none !important;
      padding: 60px !important; /* Espace autour du texte */
      
      /* On aligne le contenu */
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important; /* Centré verticalement */
      align-items: flex-start !important; /* Aligné à gauche */
  }

  /* 5. LE CONTENU DU TEXTE (ALIGNEMENT 390px) */
  /* On applique la limite UNIQUEMENT aux éléments intérieurs, pas au conteneur */
  .product-details > *,
  .product__info-container > *,
  .product-form,
  .product-form__buttons,
  accordion-custom,
  .product-extra-info-integrated {
      width: 100% !important;
      max-width: 390px !important;
      margin-left: 0 !important; /* Colle à gauche */
      margin-right: auto !important;
  }
  
  /* Sécurité pour que le texte ne soit pas minuscule */
  * {
      box-sizing: border-box !important;
  }