/** Shopify CDN: Minification failed

Line 326:27 Unexpected "*"

**/
/* WANTED STORE V4 Brand Override Layer */
:root{--dl-brand:#adff00;--dl-brand-soft:#dcffb3;--dl-brand-softer:#f5ffe9;--dl-ink:#0A0A0A;--dl-paper:#FFFFFF;--dl-paper-soft:#f8fff0;--dl-glow:0 14px 40px rgba(255,0,166,.45);}

/* FONTS */
body,.theme,[class*="font-body"],button,input,select,textarea{font-family:"Inter",system-ui,sans-serif!important;}
h1,h2,h3,h4,h5,h6,[class*="heading"],[class*="title"]{font-family:'Archivo',system-ui,sans-serif!important;font-style:italic!important;font-weight:700!important;letter-spacing:-0.02em!important;}
[class*="price"],.money,[data-money],[class*="amount"]{font-family:"JetBrains Mono",ui-monospace,monospace!important;font-weight:600!important;}
::selection{background:var(--dl-brand);color:#fff;}

/* BUTTONS pill WANTED STORE */
.button,button.button,[class*="button"]:not(.dl-qv-pill),.btn,button[name="add"],.product-form__submit,[class*="cta"]{border-radius:999px!important;transition:all .25s cubic-bezier(.22,.61,.36,1)!important;letter-spacing:.04em!important;text-transform:uppercase;}
.button--primary,.button-primary{background:var(--dl-ink)!important;color:var(--dl-paper)!important;}
.button--primary:hover,.button-primary:hover,button[name="add"]:hover{background:#1f1f1f!important;box-shadow:0 10px 26px rgba(0,0,0,.28)!important;transform:translateY(-2px);}

/* SALE + badges */
[class*="badge"],[class*="sale-tag"]{border-radius:999px!important;}
[class*="badge-sale"],.product-badges__sale{background:var(--dl-brand)!important;color:var(--dl-paper)!important;transform:rotate(-2deg);box-shadow:2px 2px 0 var(--dl-ink);}
[data-on-sale="true"] [class*="price"],.price--on-sale,.sale{color:var(--dl-brand)!important;}

/* CARDS radius */
.card,.product-card,[class*="product-card"],[class*="collection-card"]{border-radius:16px!important;overflow:hidden;}
.product-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(255,0,166,.15);}
.product-card img{transition:transform .55s cubic-bezier(.22,.61,.36,1)!important;}
.product-card:hover img{transform:scale(1.04);}

/* INPUTS */
input,select,textarea{border-radius:8px!important;font-family:"Inter",sans-serif!important;}
input:focus,select:focus,textarea:focus{border-color:var(--dl-brand)!important;box-shadow:0 0 0 3px rgba(255,0,166,.15)!important;}

/* LINKS */
a:hover{color:var(--dl-brand);}

/* HEADER logo */
.header__logo img,.site-header__logo img{max-height:44px!important;}

/* CART drawer accent */
.cart-drawer__inner [class*="primary"],.free-shipping-bar__progress{background:var(--dl-brand)!important;}

/* MARQUEE brand */
[class*="scrolling-content"]{background:var(--dl-ink)!important;color:var(--dl-brand-soft)!important;}
[class*="scrolling-content"] [class*="item"],[class*="scrolling-content"] span{font-family:'Archivo',serif!important;font-style:italic!important;font-weight:600!important;}

/* TESTIMONIALS */
[class*="testimonial"] [class*="card"]{border-radius:20px!important;}
[class*="testimonial"] [class*="star"] svg{fill:#00B67A!important;}

/* NEWSLETTER */
[class*="newsletter"]{background:linear-gradient(135deg,var(--dl-brand-softer) 0%,#fff 60%,var(--dl-brand-soft) 100%)!important;}
[class*="newsletter"] button[type="submit"]{background:var(--dl-ink)!important;color:#fff!important;border-radius:999px!important;}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}
/* === WANTED STORE logo enforced === */
.header__logo-image-wrapper:empty::before,
.header__logo:empty::before {
  content: '';
  display: block;
  width: 140px;
  height: 44px;
  background-image: url('{{ "dl-logo.png" | asset_url }}');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}
.header__logo-image-wrapper img,
.header__logo img {
  max-height: 44px !important;
  width: auto !important;
}
.header__logo {
  font-family: 'Archivo', serif !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  color: var(--dl-ink) !important;
}
/* Hide cart total counters with 0 */
[data-cart-count]:empty,
.cart-link__bubble:empty { display: none !important; }

/* Hide default _section-header placeholder in collection-list */
.shopify-section--collection-list [class*="section-header"] {
  display: none !important;
}
/* But keep rich-text headings on title sections */
.shopify-section--rich-text { display: block !important; }

/* Bigger price on product cards (Cloud Run native) */
[class*="product-card"] [class*="price"] {
  font-size: clamp(20px, 3.2vw, 26px) !important;
  font-weight: 700 !important;
}

/* === WANTED STORE logo prominent === */
.header__logo {
  display: flex !important;
  align-items: center;
  text-decoration: none !important;
}
.header__logo-text.heading {
  font-family: 'Archivo', 'Inter', sans-serif !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 6vw, 44px) !important;
  letter-spacing: -0.025em !important;
  color: #0A0A0A !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
}
/* If desktop_layout sends logo center, keep it centered */
@media (min-width: 1000px) {
  .header__logo-text.heading {
    font-size: 44px !important;
  }
}

/* Prices bigger */
[class*="product-card"] [class*="price"],
.product-card__price,
.product-card .price {
  font-size: clamp(20px, 3.2vw, 26px) !important;
  font-weight: 700 !important;
}

/* Hide empty Logo list section (no images) */
.shopify-section--logo-list:has([class*="placeholder"]),
.shopify-section--logo-list:not(:has(img[src*="cdn.shopify"])) {
  display: none !important;
}

/* Force-hide empty Logo list */
.shopify-section--logo-list { display: none !important; }

/* === LOGO LARGE GUARANTEE === */
.header__logo,
.header__logo-text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.header__logo {
  display: flex !important;
  align-items: center;
  height: auto !important;
  padding: 8px 0 !important;
}
.header__logo-text.heading,
.header__logo p {
  font-family: 'Archivo', 'Inter', sans-serif !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  letter-spacing: -0.025em !important;
  color: #0A0A0A !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
@media (min-width: 1000px) {
  .header__logo-text.heading,
  .header__logo p { font-size: 44px !important; }
}
/* Ensure header itself has height */
.shopify-section--header > .header,
.header {
  min-height: 72px !important;
}

/* === LOGO IMG bigger === */
.header__logo img,
.header__logo-image {
  height: 56px !important;
  width: auto !important;
  max-width: 200px !important;
}
@media (min-width: 1000px) {
  .header__logo img,
  .header__logo-image { height: 72px !important; }
}
/* Center logo on mobile (logo_center_navigation_split) */
.header__logo { justify-self: center !important; }


/* === LOGO IMG larger === */
.header__logo-image-injected {
  height: 64px !important;
  width: auto !important;
  max-width: 240px !important;
}
@media (min-width: 1000px) {
  .header__logo-image-injected { height: 80px !important; }
}

/* Don't hide anything, just lighten gradients */
.shopify-section--collection-list .with-overlay::after,
.shopify-section--collection-list .with-overlay::before {
  opacity: 0.3 !important;
}


/* Pure image without overlay on outside mode */
.shopify-section--collection-list .content-box__background-media {
  position: relative !important;
}



/* === Logo bigger (image) === */
.header__logo-image-injected {
  height: 70px !important;
  width: auto !important;
  max-width: 260px !important;
}
@media (min-width: 1000px) {
  .header__logo-image-injected { height: 90px !important; }
}

/* === Collection cards CLEAN unified === */
.shopify-section--collection-list .collection-list__item {
  background: transparent !important;
  text-decoration: none !important;
  display: block;
}
.shopify-section--collection-list .v-stack {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.shopify-section--collection-list .collection-list__item:hover .v-stack {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(255,0,166,.18);
}
.shopify-section--collection-list .content-box {
  margin: 0 !important;
  border-radius: 0 !important;
}
.shopify-section--collection-list .content-box__background-media {
  opacity: 1 !important;
}
.shopify-section--collection-list .content-box__background-media::before,
.shopify-section--collection-list .with-overlay::after,
.shopify-section--collection-list .with-overlay::before {
  display: none !important;
}
.shopify-section--collection-list .prose {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px !important;
  background: #fff;
  margin: 0 !important;
}
.shopify-section--collection-list .prose [class*="heading"],
.shopify-section--collection-list .prose h2,
.shopify-section--collection-list .prose h3,
.shopify-section--collection-list .prose [class*="display"] {
  font-family: 'Archivo', system-ui, sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: clamp(15px, 2.8vw, 20px) !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: #0A0A0A !important;
  margin: 0 !important;
  line-height: 1.05 !important;
  text-align: left !important;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shopify-section--collection-list .prose [class*="button"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #adff00 !important;
  color: #fff !important;
  border: none !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  flex-shrink: 0;
  flex-grow: 0;
  transition: all .3s cubic-bezier(.22,.61,.36,1) !important;
  line-height: 1 !important;
}
.shopify-section--collection-list .collection-list__item:hover .prose [class*="button"] {
  background: #0A0A0A !important;
  transform: translateX(4px);
}
/* Image fixed aspect ratio for clean grid */
.shopify-section--collection-list .content-box {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.shopify-section--collection-list img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* === Allow NOS DRIPS image to keep natural aspect (no crop) === */
.shopify-section--collection-list[id*="nos_drips"] .content-box,
#shopify-section-template--*__nos_drips .content-box {
  aspect-ratio: auto !important;
}
.shopify-section--collection-list[id*="nos_drips"] img {
  object-fit: contain !important;
}
/* NOS COLLECTIONS keeps 4/5 ratio for grid alignment */
.shopify-section--collection-list[id*="nos_collections"] .content-box {
  aspect-ratio: 4 / 5;
}
.shopify-section--collection-list[id*="nos_collections"] img {
  object-fit: cover;
  object-position: center;
}


/* === WANTED STORE logo HERO (final authoritative override) === */
.header__logo-image-injected,
.header__logo img,
.header__logo-image,
.header__logo-image-wrapper img {
  height: 80px !important;
  max-height: 140px !important;
  min-height: 80px !important;
  width: auto !important;
  max-width: 380px !important;
  object-fit: contain !important;
}
@media (min-width: 1000px) {
  .header__logo-image-injected,
  .header__logo img,
  .header__logo-image,
  .header__logo-image-wrapper img {
    height: 115px !important;
    max-height: 160px !important;
    min-height: 115px !important;
  }
}
.header__logo,
.header,
.shopify-section--header > .header { min-height: 100px !important; }


/* === WANTED STORE logo position (nudge up) === */
.header__logo {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-self: flex-start !important;
}
.header__logo-image,
.header__logo img {
  transform: translateY(-18px) !important;
}
@media (min-width: 1000px) {
  .header__logo-image,
  .header__logo img {
    transform: translateY(-22px) !important;
  }
}


/* === RATING stars PINK === */
.rating-badge svg,
.rating-badge .icon,
.rating-badge__stars svg,
.rating-badge__stars .icon {
  color: var(--dl-brand) !important;
  fill: var(--dl-brand) !important;
}
.rating-badge .subheading {
  color: var(--dl-ink) !important;
  font-weight: 600 !important;
}

/* === PDP : réduire le gros gap entre main-product et sections suivantes === */
.shopify-section--main-product { padding-bottom: 16px !important; }
.shopify-section--blocks:has(.cs-rev-section),
.shopify-section--blocks .cs-rev-section { padding-top: 8px !important; }
.cs-rev-section { padding-top: 12px !important; }
section.shopify-section--blocks { padding-block: 16px !important; }

/* === PDP : espacement uniforme entre tous les blocs (14px) === */
.shopify-section--main-product .product-info > *,
.shopify-section--main-product main-product-section > *,
.shopify-section--main-product .product-info__block-list > *,
.shopify-section--main-product .product-info [data-block-type] {
  margin-top: 14px !important;
  margin-bottom: 14px !important;
  padding-block: 0 !important;
}
.shopify-section--main-product .product-info > *:first-child,
.shopify-section--main-product main-product-section > *:first-child {
  margin-top: 0 !important;
}
.shopify-section--main-product [class*="separator"] {
  margin-block: 14px !important;
}

/* === ATC compact, sous la card (rendu par product-card.liquid en bout de carte) === */
/* Stack the 3 children (figure, info, quick-buy) vertically, override subgrid */
product-card.product-card,
.product-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  grid-template: none !important;
}
.product-card__quick-buy {
  position: static !important;
  inset: auto !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  background: transparent !important;
  z-index: auto !important;
}
.product-card__info {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Petit espace sous chaque card pour respirer */
product-card.product-card,
.product-card {
  margin-bottom: 14px !important;
}
.product-card__quick-buy product-form,
.product-card__quick-buy form {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}
.product-card__quick-buy .touch\:hidden {
  display: block !important;
  width: 100% !important;
}
.product-card__quick-buy .no-touch\:hidden.tap-area,
.product-card__quick-buy button.tap-area.no-touch\:hidden {
  display: none !important;
}
.product-card__quick-buy .button,
.product-card__quick-buy product-form button.button {
  background: #adff00 !important;
  color: #0a0a0a !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 0 14px !important;
  min-height: 0 !important;
  height: 44px !important;
  line-height: 44px !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  --button-background: 173 255 0 !important;
  --button-text-color: 10 10 10 !important;
}
.product-card__quick-buy .button-content,
.product-card__quick-buy button-content {
  font-size: 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.product-card__quick-buy .button:hover {
  background: #75c916 !important;
}

/* ================================================================
   WANTED STORE 2026-07-16 : affordance de scroll sur les onglets de categorie (mobile)
   Probleme : tabs_alignment=center -> classe .justify-center sur une .scroll-area.
   Centrer un contenu qui DEBORDE repartit le debordement des 2 cotes : rien nest
   coupe franchement a droite, donc aucun signal quon peut faire glisser. (Et en
   justify-content:center, la partie gauche devient meme inatteignable au scroll
   sur certains navigateurs = bug CSS connu.)
   Fix : aligner a gauche -> tout le debordement part a droite -> le dernier onglet
   est coupe par le bord = affordance naturelle, sans fleche ni texte "glissez".
   :has(> :nth-child(4)) => ne sapplique QUAUX barres de 4 onglets ou plus (celles
   qui debordent vraiment). bs_slider na quUN onglet -> reste centre, intact.
   Navigateur sans :has() -> regle ignoree, rien ne casse.
   Annuler = supprimer ce bloc.
   ================================================================ */
@media (max-width: 749px) {
  .featured-collections-header__tab-list.justify-center:has(> :nth-child(4)) {
    justify-content: flex-start !important;
    scroll-padding-inline-start: 16px;
  }
}
/* ================================================================
   WANTED STORE 2026-07-16 : taille des onglets de categorie (mobile)
   Le markup les rend en classe "h4" = taille de TITRE. A cette echelle on en voit 1,5 :
   un mot enorme + un mot coupe, ca se lit comme un titre mal cadre, pas comme une liste.
   Reduits -> on en voit 3-4 -> ca se lit comme une liste de categories, et la le mot
   coupe a droite devient un signal evident. La comprehension vient du NOMBRE visible.
   Inactifs remontes de 30% a 45% dopacite : a 30% ils etaient quasi invisibles,
   donc ne comptaient pas comme "elements de liste".
   Desktop intact (classe sm:h3, les onglets tiennent en largeur).
   Annuler = supprimer ce bloc.
   ================================================================ */
@media (max-width: 749px) {
  .featured-collections-header__tab-list [role="tab"] {
    font-size: 15px !important;
    line-height: 1.3 !important;
    letter-spacing: .01em !important;
  }
  .featured-collections-header__tab-list { column-gap: 1rem !important; }
  .featured-collections-header__tab-list [role="tab"][aria-selected="false"] { opacity: .45 !important; }

  /* degrade sur le bord droit : dit "le contenu passe dessous" au lieu de "ca sarrete".
     Seulement sur les barres qui debordent vraiment (4 onglets et +). */
  .featured-collections-header__tab-list:has(> :nth-child(4)) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent 100%);
  }
}
/* ================================================================
   WANTED STORE 2026-07-16 : onglets de categorie en PASTILLES (mobile)
   Du texte nu se lit comme un TITRE. Une pastille (fond + contour + rayon) se lit comme
   un filtre tapable : cest la convention de toutes les apps que les clientes utilisent
   deja (Vinted, Zalando, Amazon, Uber Eats). Et une pastille COUPEE par le bord reste
   reconnaissable meme tronquee -> signal de scroll bien plus fort quun mot coupe.
   Remplace le bloc "taille des onglets" precedent (font-size/opacite repris ici).
   Desktop intact (classe sm:h3).
   Annuler = supprimer ce bloc.
   ================================================================ */
@media (max-width: 749px) {
  .featured-collections-header__tab-list { column-gap: 8px !important; align-items: center !important; }
  .featured-collections-header__tab-list [role="tab"] {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;
    padding: 9px 15px !important;
    border-radius: 999px !important;
    border: 1px solid #e5f0d8 !important;
    background: #fff !important;
    color: #1a1a1a !important;
    opacity: 1 !important;              /* le theme mettait les inactifs a .3 = fantomes */
    max-width: none !important;
    margin-inline-start: 0 !important;  /* le theme decalait les inactifs */
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  .featured-collections-header__tab-list [role="tab"][aria-selected="false"] {
    opacity: 1 !important;
    background: #fff !important;
    color: #616b55 !important;
  }
  .featured-collections-header__tab-list [role="tab"][aria-selected="true"] {
    background: #adff00 !important;
    border-color: #adff00 !important;
    color: #0a0a0a !important;
  }
  /* la fleche du theme na plus de sens dans une pastille */
  .featured-collections-header__tab-list [role="tab"] svg,
  .featured-collections-header__tab-list [role="tab"]:before { display: none !important; }
  .featured-collections-header__tab-list [role="tab"] span { transform: none !important; }
}

/* ================================================================
   WANTED STORE 2026-07-18 : fix debordement pastille onglet sur best-sellers.
   Le bloc "onglets categorie en PASTILLES" ci-dessus cible TOUTES les
   .featured-collections-header__tab-list -> il pillait aussi les sections a UN
   seul onglet (best-sellers "Les plus vendus" = pastille rose isolee). Ici on
   NEUTRALISE le look pastille UNIQUEMENT sur les listes sans 2e onglet (les
   categories multi-onglets restent INTACTES). Mobile-only comme le bloc source.
   ================================================================ */
@media (max-width: 749px) {
  .featured-collections-header__tab-list:not(:has(> [role="tab"] ~ [role="tab"])) [role="tab"],
  .featured-collections-header__tab-list:not(:has(> [role="tab"] ~ [role="tab"])) [role="tab"][aria-selected="true"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #1a1a1a !important;
  }
}


/* WANTED: CTA noir */
button[name="add"], .product-form__submit, .button--primary, .button-primary,
.shopify-payment-button__button--unbranded, [class*="add-to-cart"], .dl-qv-atc,
.product-card__quick-buy .button {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border-color: #0A0A0A !important;
}
button[name="add"]:hover, .product-form__submit:hover, .button--primary:hover,
.button-primary:hover, .shopify-payment-button__button--unbranded:hover,
[class*="add-to-cart"]:hover, .dl-qv-atc:hover, .product-card__quick-buy .button:hover {
  background: #1f1f1f !important;
  color: #FFFFFF !important;
}


/* charte SNEAK ADDICT : le bouton d ajout est lime, y compris dans un
   <product-form> (c est le cas de la section « le meilleur de chaque »).
   Ce bloc valait « quick-buy noir » du temps de WANTED. */
.product-card__quick-buy product-form button.button,
.product-card__quick-buy product-form button.button.w-full {
  background: #adff00 !important;
  color: #0a0a0a !important;
}
.product-card__quick-buy product-form button.button:hover {
  background: #c2ff3d !important;
}


/* WANTED: grilles de collections 2 colonnes */
/* Vaut pour la home ET pour les pages hub (sneakers, sacs femme, sacoches...) :
   partout une grille verticale 2 colonnes en mobile, 4 en desktop, sans bouton fleche. */
@media screen and (max-width: 699px) {
  .shopify-section--collection-list .collection-list,
  .collection-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 10px !important;
    overflow: visible !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .collection-list .collection-list__item { width: auto !important; min-width: 0 !important; }
  .collection-list .collection-list__item .button { display: none !important; }
  .collection-list .prose {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    padding: 6px 4px 12px !important; margin: 0 !important; width: 100% !important;
  }
  .collection-list .prose p, .collection-list p.display-s,
  .collection-list p.display-m, .collection-list p.display-l {
    font-size: clamp(13px, 3.8vw, 16px) !important; line-height: 1.2 !important;
    margin: 0 !important; text-align: center !important; color: #000 !important;
    font-weight: 700 !important; text-transform: uppercase !important;
  }
}


/* ===== SNEAK ADDICT : corrections d audit du 12/09/2026 ===== */

/* Grille des collections : hauteur de libelle constante, sinon un titre sur deux
   lignes decale toute la rangee suivante. */
.collection-list__item .v-stack > :last-child p,
.collection-list__item [class*="title"] {
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pied de page : le lime sert de reperage, pas de couleur de corps de texte. */
.footer a:not(.button) { color: #f2f2ef !important; transition: color .15s ease; }
.footer a:not(.button):hover,
.footer a:not(.button):focus-visible { color: #adff00 !important; }
.footer .footer__block-title,
.footer h2, .footer h3, .footer .h5 { color: #d8ff4d !important; }

/* Les boutons d achat se decalaient de 10 a 15 px d une carte a l autre selon
   que le prix tenait sur une ou deux lignes. On les ancre en bas de carte. */
.product-card { height: 100%; }
.product-card__quick-buy { margin-top: auto; padding-top: .5rem; }
.product-card__info { min-height: 72px; }

/* Le bandeau « Panier reserve » est un enfant du conteneur flex du tiroir :
   quand le panier est peu rempli, il se faisait etirer sur 300 px de haut avec
   une ligne de texte perdue au milieu. On le fige a sa hauteur naturelle. */
.dl-reserved { flex: 0 0 auto !important; align-self: stretch; min-height: 0 !important; }
/* le bouton du cadeau etait blanc sur lime, contraste trop faible */
.psg-gl__btn, .cart-upsell__btn { color: #0b0b0b !important; font-weight: 700; }


/* ===== SNEAK ADDICT : lisibilite du lime sur fond clair (audit 12/09/2026) =====
   Le lime reste vif sur les fonds sombres. Sur fond clair il passe en vert profond,
   sinon le texte descend a 1,3:1 la ou il en faut 4,5. */

/* le prix : l information la plus importante, elle doit etre la plus lisible */
.product-card__info .price, .price--on-sale, .price__sale,
.product-price, [class*="price"] .money { color: #0b0b0b !important; }
.price--compare, .price__compare, s, del { color: #6b6b6b !important; }

/* accents lime poses sur du blanc */
.dl-rc, .dl-rc *, .dl-reserved, .dl-reserved *,
.psg-gl__sub, .cart-upsell__subtitle { color: #3f6b0c !important; }
.dl-reserved svg, .dl-rc-ico svg { color: #3f6b0c !important; }

/* liens et libelles d accent sur fond clair */
.color-scheme--scheme-1 a.link-faded:not(.button),
.color-scheme--scheme-4 a.link-faded:not(.button),
.subheading:not(.color-scheme--scheme-2 .subheading):not(.cart .subheading):not(line-item .subheading):not(.color-scheme--scheme-sa-dark .subheading):not(cart-drawer .subheading) { color: #3f6b0c !important; }

/* commandes de quantite : le + et le - etaient a 1,44:1 */
.quantity-selector button, .quantity-selector svg,
[class*="quantity"] button { color: #0b0b0b !important; }

/* le badge de remise garde le lime vif : il est sur fond noir, donc lisible */
.badge--on-sale { color: #0b0b0b !important; }

/* Nos visuels de collection sont composes en CARRE (1200x1200) : diagonale lime,
   produit centre, boite de marque. Le theme les affichait en 4:5 avec object-fit:
   cover, ce qui rognait 20 % de la largeur et coupait les bords de la composition.
   On rend la case carree, les visuels s affichent alors entiers. */
.collection-list__item .content-box,
.collection-list__item .content-box__background-media,
.collection-list__item .content-box img { aspect-ratio: 1 / 1 !important; height: auto !important; }
.collection-list__item .content-box img { object-fit: cover; width: 100%; }

/* Chaque carte de collection etait une image NOIRE posee sur un bloc BLANC portant
   le libelle. Sur dix cartes cote a cote, cette alternance faisait plus desordonne
   que la variation d echelle des produits. On passe la carte entiere en sombre :
   l image et son libelle ne forment plus qu un seul bloc. */
.collection-list__item .v-stack { background: #0a0a0a; border-radius: 14px; overflow: hidden; gap: 0 !important; }
.collection-list__item .content-box { border-radius: 0 !important; }
.collection-list__item .v-stack > :last-child { padding: 14px 10px 16px; margin: 0 !important; }
.collection-list__item .v-stack p { color: #f4fff0 !important; letter-spacing: .04em; }
.collection-list__item:hover .v-stack p { color: #adff00 !important; }

/* Le bloc du libelle (.prose) porte un fond blanc plus prioritaire que le fond
   sombre de la carte, et le gap Tailwind laissait une bande entre image et texte.
   On neutralise les deux pour que la carte forme un seul bloc sombre. */
.collection-list__item .v-stack.group { gap: 0 !important; background: #0a0a0a !important; border-radius: 14px; overflow: hidden; }
.collection-list__item .prose { background: transparent !important; padding: 14px 10px 16px !important; }
.collection-list__item .prose p { color: #f4fff0 !important; letter-spacing: .04em; }
.collection-list__item:hover .prose p { color: #adff00 !important; }

/* libelle de collection en clair sur la carte sombre : la carte est passee en sombre, le libelle heritait encore du
   noir du theme et devenait illisible. */
.collection-list__item .prose,
.collection-list__item .prose p,
.collection-list__item .prose .display-s,
.collection-list__item .prose a { color: #f4fff0 !important; }
.collection-list__item:hover .prose p { color: #adff00 !important; }


/* ==================== SNEAK ADDICT / refonte visuelle 12-09-2026 ====================
   Les sections marchandes sont passees sur le schema « scheme-sa-dark ».
   Tout ce qui vit dedans doit suivre, sinon on obtient des cartes blanches
   posees sur du noir. */

/* ---------- 1. Cartes sur fond sombre ---------- */
.color-scheme--scheme-sa-dark .product-card,
.color-scheme--scheme-sa-dark .product-card .product-card__info,
.color-scheme--scheme-sa-dark .product-card__quick-buy {
  background: #141414 !important;
}
.color-scheme--scheme-sa-dark .product-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #232323;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.color-scheme--scheme-sa-dark .product-card__figure { background: #141414; }
/* le visuel produit garde son fond clair d origine : c est le packshot, pas la carte */
.color-scheme--scheme-sa-dark .product-card__media { background: #f2f2f2; }

.color-scheme--scheme-sa-dark .product-card a,
.color-scheme--scheme-sa-dark .product-card .product-title,
.color-scheme--scheme-sa-dark .product-card p { color: #f4fff0 !important; }
/* le prix : lime vif, on est sur fond sombre, il est parfaitement lisible ici */
.color-scheme--scheme-sa-dark .product-card .price,
.color-scheme--scheme-sa-dark .product-card [class*="price"]:not(.price--compare):not(s):not(del),
.color-scheme--scheme-sa-dark .product-card .money { color: #adff00 !important; }
.color-scheme--scheme-sa-dark .product-card s,
.color-scheme--scheme-sa-dark .product-card del,
.color-scheme--scheme-sa-dark .product-card .price--compare { color: #7d7d7d !important; }

/* sous-titres et intertitres des sections sombres */
.color-scheme--scheme-sa-dark .subheading,
.color-scheme--scheme-sa-dark .prose p,
.color-scheme--scheme-sa-dark h2 span { color: #adff00 !important; }
.color-scheme--scheme-sa-dark .rte, .color-scheme--scheme-sa-dark .rte p { color: #cfcfcf !important; }

/* onglets de la section « le meilleur de chaque » */
.color-scheme--scheme-sa-dark [role="tab"] { color: #cfcfcf !important; border-color: #2c2c2c !important; }
.color-scheme--scheme-sa-dark [role="tab"][aria-selected="true"] { background: #adff00 !important; color: #0a0a0a !important; border-color: #adff00 !important; }

/* ---------- 2. Bouton 3D cisaille ----------
   L ombre dure decalee donne l epaisseur, et au survol elle se rapproche :
   le bouton s enfonce vers la page au lieu de simplement changer de teinte. */
.product-card__quick-buy .button,
.product-form__buttons .button--primary,
button[name="add"], .product-form__submit {
  position: relative;
  border-radius: 10px !important;
  background: #adff00 !important;
  color: #0a0a0a !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
  border: 0 !important;
  box-shadow: 0 5px 0 #4a7000, 0 10px 22px rgba(173,255,0,.22);
  transition: box-shadow .16s ease, transform .16s ease, background-color .16s ease;
}
.product-card__quick-buy .button:hover,
.product-form__buttons .button--primary:hover,
button[name="add"]:hover, .product-form__submit:hover {
  background: #c2ff3d !important;
  box-shadow: 0 2px 0 #4a7000, 0 6px 16px rgba(173,255,0,.3);
  transform: translateY(3px);
}
.product-card__quick-buy .button:active,
.product-form__buttons .button--primary:active,
button[name="add"]:active, .product-form__submit:active {
  box-shadow: 0 0 0 #4a7000, 0 3px 10px rgba(173,255,0,.25);
  transform: translateY(5px);
}

/* ---------- 3. Halo lime sous les appels a l action ---------- */
.color-scheme--scheme-sa-dark .product-card:hover {
  border-color: #adff00;
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(0,0,0,.6), 0 0 0 1px rgba(173,255,0,.25), 0 0 26px rgba(173,255,0,.12);
}
.color-scheme--scheme-sa-dark .product-card:hover .product-card__image--primary { transform: scale(1.04); }
.color-scheme--scheme-sa-dark .product-card__image--primary { transition: transform .45s cubic-bezier(.2,.7,.3,1); }

/* ---------- 4. Grain de film sur les fonds sombres ----------
   Un aplat de noir en CSS reste plat. Un grain tres leger lui donne la matiere
   d un fond de studio. Pose en pseudo-element non cliquable. */
.color-scheme--scheme-sa-dark { position: relative; }
.color-scheme--scheme-sa-dark::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23b)' opacity='.5'/%3E%3C/svg%3E");
}
.color-scheme--scheme-sa-dark > * { position: relative; z-index: 1; }

/* le badge de remise ressort mieux avec un leger halo */
.color-scheme--scheme-sa-dark .badge--on-sale {
  box-shadow: 0 0 18px rgba(173,255,0,.35);
  font-weight: 800;
}


/* ==================== SNEAK ADDICT / rattrapage lisibilite cartes ====================
   Le titre produit porte la classe .subheading : ma regle de contraste le
   colorait donc en vert, comme un intertitre. Un nom de produit se lit en noir.
   Et le badge de remise etait blanc sur lime, soit 1,2:1 de contraste. */
.product-card .product-title,
.product-card a.product-title.subheading { color: #0a0a0a !important; font-weight: 700; }
.color-scheme--scheme-sa-dark .product-card .product-title { color: #f4fff0 !important; }
/* la note entre parentheses reste discrete, pas verte */
.product-card .rating-badge .subheading { color: #6b6b6b !important; }
/* badge de remise : noir sur lime, lisible partout */
.badge--on-sale, .badge--on-sale * { color: #0a0a0a !important; font-weight: 800 !important; }
/* le prix barre en gris, seul le prix de vente porte l accent */
.product-card s, .product-card del, .product-card .price--compare { color: #8a8a8a !important; }


/* ==================== SNEAK ADDICT / carte produit premium ==================== */

/* --- le badge : c est un element personnalise <on-sale-badge>, il faut le viser
       par son nom de balise, la classe seule se fait doubler --- */
on-sale-badge, on-sale-badge *,
.badge.badge--on-sale, .badge.badge--on-sale * {
  color: #0a0a0a !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}
on-sale-badge.badge--on-sale, .badge.badge--on-sale {
  background: #adff00 !important;
  border-radius: 999px !important;
  padding: 5px 11px !important;
  font-size: 11px !important;
}

/* --- le prix : l information qu on doit lire de loin --- */
.product-card .price,
.product-card [class*="price"]:not(s):not(del):not(.price--compare) {
  color: #0a0a0a !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}
.product-card s, .product-card del, .product-card .price--compare {
  color: #9a9a9a !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
/* sur les sections sombres, le prix passe en lime : meme hierarchie, autre fond */
.color-scheme--scheme-sa-dark .product-card .price,
.color-scheme--scheme-sa-dark .product-card [class*="price"]:not(s):not(del):not(.price--compare) { color: #adff00 !important; }

/* --- le titre : deux lignes reservees, jamais de saut de hauteur entre cartes --- */
.product-card .product-title,
.product-card a.product-title.subheading {
  color: #0a0a0a !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.color-scheme--scheme-sa-dark .product-card .product-title { color: #f4fff0 !important; }

/* --- la note : presente, pas envahissante --- */
.product-card .rating-badge .subheading { color: #8a8a8a !important; font-size: 11px !important; }
.product-card .rating-badge svg { width: 13px; height: 13px; }

/* --- respiration : la carte etait trop serree --- */
.product-card__info { padding: 12px 12px 4px !important; min-height: 0 !important; }
.product-card__quick-buy { padding: 0 12px 12px !important; }


/* ==================== SNEAK ADDICT / brillance v2 sur les titres de section ==================== */
@keyframes saBalayage2 {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.display-l, .display-m, .display-xl {
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: saBalayage2 5s linear infinite;
  /* le degrade n est peint que dans la boite du glyphe : on rend un peu de place
     a droite pour que l italique ne soit pas tranchee, sans bouger la mise en page */
  padding-inline: .05em .26em;
  margin-inline: -.05em -.26em;
}

/* sections claires : le titre reste noir, le lime ne fait que passer */
.color-scheme--scheme-1 .display-l,
.color-scheme--scheme-1 .display-m,
.color-scheme--scheme-1 .display-xl,
.color-scheme--scheme-4 .display-l,
.color-scheme--scheme-4 .display-m {
  background-image: linear-gradient(110deg, #0a0a0a 43%, #8fd400 50%, #0a0a0a 57%);
}

/* sections sombres : blanc casse traverse par le lime vif */
.color-scheme--scheme-sa-dark .display-l,
.color-scheme--scheme-sa-dark .display-m,
.color-scheme--scheme-sa-dark .display-xl,
.color-scheme--scheme-2 .display-l,
.color-scheme--scheme-2 .display-m {
  background-image: linear-gradient(110deg, #f4fff0 43%, #adff00 50%, #f4fff0 57%);
}

/* les petits libelles ne brillent pas : l effet doit rester rare pour valoir */
.display-s, .product-card .product-title, .collection-list__item .display-s {
  background-image: none !important;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  animation: none !important;
  padding-inline: 0; margin-inline: 0;
}
.color-scheme--scheme-sa-dark .collection-list__item .display-s { color: #f4fff0 !important; }
.color-scheme--scheme-1 .collection-list__item .display-s { color: #0a0a0a !important; }

@media (prefers-reduced-motion: reduce) {
  .display-l, .display-m, .display-xl { animation: none; background-position: 50% center; }
}

/* ==================== SNEAK ADDICT / un seul accent ====================
   Cinq verts cohabitaient sur une carte : prix, prix barre, etoiles, badge,
   bouton. Le lime ne doit crier qu a UN endroit, celui de l action.
   Le reste se hierarchise par la taille et la graisse, pas par la couleur. */
.product-card .price, .product-card .price *,
.product-card [class*="price"]:not(s):not(del):not(.price--compare),
.product-card [class*="price"]:not(s):not(del):not(.price--compare) * { color: #0a0a0a !important; }
.color-scheme--scheme-sa-dark .product-card .price,
.color-scheme--scheme-sa-dark .product-card .price * { color: #f4fff0 !important; }
/* les etoiles gardent le lime : elles sont le seul signal positif du bloc info */
.product-card .rating-badge svg { color: #8fd400 !important; }

/* ==== panier lisible v2 ====
   Selecteurs releves dans le DOM reel, pas devines : le theme rend une ligne
   de panier en <line-item>, le nom en a.subheading et le prix de ligne en
   span.line-item__line-price.
   1. .subheading sert au surtitre (« FAQ ») ET au nom d un article : ma
      couleur de marque teintait le nom et le prix en vert olive a 11px.
   2. a quantite 1, prix unitaire et prix de ligne sont identiques : on
      croyait a un prix affiche deux fois. On les hierarchise au lieu d en
      masquer un, qui redevient utile des la quantite 2. */
line-item .line-item__info a.subheading,
.line-item__info a.subheading {
  color: #0a0a0a !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.32 !important;
}
line-item sale-price, line-item sale-price * {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  font-style: normal !important;
}
line-item span.line-item__line-price {
  color: #767676 !important;
  -webkit-text-fill-color: #767676 !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  font-style: normal !important;
}
line-item compare-at-price, line-item compare-at-price * {
  color: #767676 !important;
  -webkit-text-fill-color: #767676 !important;
  font-weight: 400 !important;
}
/* le delai de livraison etait a 2,16:1, illisible sur son fond creme */
.dl-rc-live .dl-rc-live-txt b, .dl-rc-live b, .dl-rc-live strong {
  color: #3f6b0c !important;
}

/* ==== alignement des deux prix ====
   Mesure sur la fiche produit iPhone : le prix courant occupe une boite de
   18,4 px de haut, le prix barre 12,5, et leur conteneur les colle par le bas
   (align-items: flex-end). Resultat, le 158,00 barre pendait sous le 79,00.
   Deux prix cote a cote s alignent sur la ligne de base, pas sur le bas de
   boite. Au passage le gris du prix barre etait a 2,81:1. */
.price-list, price-list { align-items: baseline !important; }
.price-list compare-at-price, price-list compare-at-price {
  line-height: 1 !important;
  color: #767676 !important;
  -webkit-text-fill-color: #767676 !important;
}

/* ==== le cadre « panier reserve » ne fait plus 147 px ====
   Une ligne de texte de 11 px occupait un cadre de 147 px de haut dans le
   tiroir : le bandeau paraissait vide. La hauteur venait d un align-self:
   stretch resolu a 147 px, pas du padding, qui est bien de 5 px.
   Mesure apres correction : 27 px. */
.dl-reserved {
  height: auto !important;
  min-height: 0 !important;
  align-self: center !important;
}

/* ==== badges personnalises lisibles ====
   « 🔥 BEST-SELLER » sortait en blanc sur l orange #FF6B35 : 2,69:1, sous le
   seuil et sur 9 px seulement. Sur un orange aussi lumineux, seul le noir
   passe (7,3:1). Vaut pour les trois badges, qui partagent la classe. */
.badge--custom, .badge.badge--custom, span.badge--custom {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}
/* le surtitre « ✦ Univers » tombait a 3,96:1 sur son fond creme */
.subheading-badge, span.subheading-badge { color: #3f6b0c !important; }

/* ==== cibles tactiles : 44 px minimum ====
   Mesure iPhone : le hamburger faisait 16x5 px, la recherche et le PANIER
   24x24. C est la cause du « je clique sur le panier et ca ne s ouvre pas » :
   l ouverture prend 106 ms une fois le clic touche, mais avec un doigt on
   rate une cible de 24 px une fois sur deux. Apple demande 44x44 pt.
   On agrandit la ZONE TACTILE sans toucher a la taille des icones. */
header a.tap-area,
header button.tap-area,
header a.header__search-link,
header .header__cart-link > a {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Les fleches de carrousel faisaient 10x10 et les points de pagination 8x1 :
   inatteignables. Ici on ne peut pas agrandir la boite sans deplacer la mise
   en page, alors on etend la zone de touche par un pseudo-element centre. */
.scroll-marker,
.tap-area--s,
[class*="slider"] button.tap-area {
  position: relative !important;
}
.scroll-marker::after,
.tap-area--s::after,
[class*="slider"] button.tap-area::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 44px !important;
  height: 44px !important;
  transform: translate(-50%, -50%) !important;
}

/* les + et - du panier etaient a 40x32 */
.quantity-selector__button {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* les decors des <li> du header (badge du compteur, pastilles) sont
   purement visuels : ils ne doivent jamais intercepter le clic destine au
   lien qu ils habillent. C est ce qui rendait le panier increvable a
   cliquer alors que sa zone faisait pourtant 44 px. */
header li::after, header li::before {
  pointer-events: none !important;
}


/* ==== echelle des titres ====
   Un niveau = une valeur, partout. Avant, .display-l valait 28,08 px dans une
   section et 35,88 dans une autre : le L passait sous le M selon l endroit. */
@media (max-width: 749px) {
  .display-l, p.display-l, h1.display-l, h2.display-l {
    font-size: clamp(28px, 8.2vw, 36px) !important;
    line-height: 1.04 !important;
  }
  .display-m, p.display-m, h2.display-m {
    font-size: clamp(23px, 6.6vw, 30px) !important;
    line-height: 1.06 !important;
  }
}


/* ==== pagination lisible ====
   Le numero de page actif sortait a 3,13:1 : le vert de marque sur le
   fond lime pale de la pastille active. Le noir passe a 16:1. */
.pagination__link, .pagination__link.subheading { color: #0a0a0a !important; }
.pagination__link[aria-current], .pagination__link.is-active { font-weight: 800 !important; }

/* ==== le compteur du panier affiche le nombre ====
   Le theme rendait un simple point de 9 px : le nombre d articles n existait
   que dans un <span class="sr-only">, donc pour les lecteurs d ecran
   seulement. Le client ne savait jamais ce qu il avait dans son panier.
   On sort le nombre de son isolement et on lui donne une pastille. */
header cart-count.header__active-dot, .header__cart-link cart-count.header__active-dot {
  width: auto !important;
  min-height: 18px !important;
  top: auto !important;
  right: auto !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #adff00 !important;
  color: #0a0a0a !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  padding: 0 5px !important;
  box-sizing: border-box !important;
}
cart-count.header__active-dot .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit !important;
}

/* ==== le tiroir panier passe en noir ====
   Farouk : « un panier full black ça peut être bien ou pas ? ». Oui, ici et
   pas ailleurs. Sur une grille de 40 produits le fond sombre ferait ressortir
   40 packshots clairs comme autant de rectangles blancs — c est pour ça que
   les pages produit restent claires. Dans le tiroir il y a un a trois
   articles : le noir cesse d etre un probleme et devient l ecrin. La vignette
   claire, arrondie, se detache comme une piece exposee.

   🚨 Le panneau vit dans un shadow DOM : ses trois zones ne sont joignables
   que par ::part(). Une regle .cart-drawer classique ne les atteint pas.
   🚨 Les encarts de service sont peints par « .drawer--cart .dl-prot-btn »
   en !important : il faut nommer cart-drawer ET .drawer--cart pour passer
   devant, sinon le bloc reste blanc et le texte clair y disparait. */
cart-drawer::part(content),
cart-drawer::part(header),
cart-drawer::part(footer) {
  background: #0a0a0a !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

/* le texte du tiroir s eclaircit en bloc, les exceptions suivent */
cart-drawer .cart-item a.subheading,
cart-drawer line-item .line-item__info a.subheading,
cart-drawer line-item sale-price,
cart-drawer line-item sale-price *,
cart-drawer h1, cart-drawer h2, cart-drawer p, cart-drawer b, cart-drawer strong,
cart-drawer em, cart-drawer span, cart-drawer div, cart-drawer a, cart-drawer label {
  color: #f4fff0 !important;
  -webkit-text-fill-color: #f4fff0 !important;
}

/* le prix de ligne et le prix barre restent en retrait sans devenir illisibles */
cart-drawer line-item span.line-item__line-price,
cart-drawer line-item compare-at-price,
cart-drawer line-item compare-at-price * {
  color: #8f8f8f !important;
  -webkit-text-fill-color: #8f8f8f !important;
}

/* la vignette produit : un ecrin clair, c est tout l interet du fond noir */
cart-drawer line-item img,
cart-drawer .cart-item img {
  background: #f4f4f4 !important;
  border-radius: 10px !important;
}

/* les encarts de service : sombres et cernes de lime au lieu de blancs */
cart-drawer.drawer--cart .dl-prot-btn,
cart-drawer.drawer--cart .dl-prot-btn.is-on,
cart-drawer.drawer--cart .dl-prot-btn:hover {
  background: rgba(173, 255, 0, .08) !important;
  border-color: rgba(173, 255, 0, .38) !important;
}
cart-drawer.drawer--cart .dl-rc-live {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  border-top-color: rgba(255, 255, 255, .14) !important;
}
cart-drawer.drawer--cart .dl-reserved,
cart-drawer.drawer--cart .psg-gl {
  background: rgba(173, 255, 0, .06) !important;
  border-color: rgba(173, 255, 0, .3) !important;
}

/* les accents de marque repassent devant la regle generale */
cart-drawer .dl-reserved, cart-drawer .dl-reserved *,
cart-drawer .dl-rc-live b, cart-drawer .dl-prot-p,
cart-drawer .psg-gl__t b {
  color: #adff00 !important;
  -webkit-text-fill-color: #adff00 !important;
}

/* sur du noir, un bouton noir n existe plus : il passe au lime */
cart-drawer button[name="checkout"],
cart-drawer .cart-drawer__footer button.button,
cart-drawer.drawer--cart .psg-gl__pick {
  background: #adff00 !important;
}
cart-drawer button[name="checkout"] *,
cart-drawer .cart-drawer__footer button.button *,
cart-drawer.drawer--cart .psg-gl__pick,
cart-drawer.drawer--cart .psg-gl__pick * {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
}

/* la coche de la protection reste verte mais se voit sur le sombre */
cart-drawer.drawer--cart .dl-prot-btn.is-on .dl-prot-box {
  background: #adff00 !important;
  border-color: #adff00 !important;
}
cart-drawer.drawer--cart .dl-prot-btn.is-on .dl-prot-box svg {
  color: #0a0a0a !important;
}

/* ==== croix et respiration du tiroir ====
   Deux defauts nes du passage au noir et de la structure du panneau :

   1. la croix de fermeture est peinte en #0a0a0a par le theme. Sur le fond
      noir elle devenait invisible : plus moyen de fermer le tiroir autrement
      qu en tapant a cote.
   2. le corps du panneau est une GRILLE qui occupe toute la hauteur restante
      (flex: 1 1 auto). Avec un seul article, ses rangees s etiraient : 111 px
      de vide sous le titre, 73 de plus sous le bandeau. « align-content:
      start » colle le contenu en haut, le pied reste en bas comme il doit. */
cart-drawer::part(close-button) {
  color: #f4fff0 !important;
}
cart-drawer::part(body) {
  align-content: start !important;
  row-gap: 14px !important;
}

/* ==== « complete ton look » sur fond noir ====
   🚨 Deux jeux de classes coexistent dans ce theme : « psg-upsell », qui n est
   qu un modele inerte jamais rendu, et « product-cross-sell », celui que le
   navigateur affiche vraiment. J ai habille le premier deux fois sans rien
   voir changer avant de verifier lequel existait dans le DOM.

   Le bloc arrivait en creme (#f8fff0) avec, par-dessus, le texte clair du
   tiroir : nom et prix invisibles, et le bouton en vert sur lime. Il devient
   un encart sombre de la meme famille que « protection d expedition ». */
cart-drawer .product-cross-sell {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  border-radius: 12px !important;
}
cart-drawer .product-cross-sell:hover {
  border-color: rgba(173, 255, 0, .45) !important;
}
/* le visuel garde son ecrin clair, comme la vignette de la ligne d article */
cart-drawer .product-cross-sell img {
  background: #f4f4f4 !important;
  border-radius: 8px !important;
}
/* le nom du produit : le vert de marque ne se lit pas sur du sombre */
cart-drawer .product-cross-sell a.subheading,
cart-drawer .product-cross-sell .v-stack > a {
  color: #f4fff0 !important;
  -webkit-text-fill-color: #f4fff0 !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
cart-drawer .product-cross-sell price-list,
cart-drawer .product-cross-sell sale-price,
cart-drawer .product-cross-sell sale-price * {
  color: #f4fff0 !important;
  -webkit-text-fill-color: #f4fff0 !important;
}
cart-drawer .product-cross-sell compare-at-price,
cart-drawer .product-cross-sell compare-at-price * {
  color: #8f8f8f !important;
  -webkit-text-fill-color: #8f8f8f !important;
}
/* le bouton sortait en vert sur lime : 1,9:1 */
cart-drawer .product-cross-sell button,
cart-drawer .product-cross-sell button * {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
}
cart-drawer .product-cross-sell button {
  background: #adff00 !important;
  transform: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}

/* le bouton de la carte n avait AUCUN rembourrage : 78x11 px, si bien que le
   fond lime ne couvrait pas son propre libelle et que le texte semblait
   deborder. Ce n etait pas le cisaillement de la charte, c etait la taille. */
cart-drawer .product-cross-sell button.block,
cart-drawer .product-cross-sell button {
  padding: 8px 14px !important;
  min-height: 34px !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  transform: none !important;
  box-shadow: none !important;
}
cart-drawer .product-cross-sell button button-content,
cart-drawer .product-cross-sell button * {
  transform: none !important;
}
/* les fleches du carrousel arrivaient l une grise, l autre blanche */
cart-drawer .cart-drawer__cross-sell button[class*="prev"],
cart-drawer .cart-drawer__cross-sell button[class*="next"],
cart-drawer [class*="cross-sell"] .scroll-carousel__button {
  background: rgba(255, 255, 255, .12) !important;
  color: #f4fff0 !important;
  border: 0 !important;
}

/* Les deux fleches du carrousel de recommandations arrivaient l une grise,
   l autre blanche, peintes par un ::before dont la couleur vient d une
   variable du theme en oklab : trois tentatives de surcharge n en sont pas
   venues a bout. Sur telephone elles ne servent a rien de toute facon, on
   fait defiler au doigt. On les retire la ou le pointeur est un doigt, elles
   restent sur ordinateur ou la souris en a besoin. */
@media (hover: none) and (pointer: coarse) {
  cart-drawer .cart-drawer__cross-sell .circle-button { display: none !important; }
}

/* ==== ce qui est pose sur du lime reste noir ====
   🚨 Ma regle generale « cart-drawer span { color: #f4fff0 } » balaie tout le
   tiroir, et un !important d auteur bat un style inline sans important : la
   pastille « -50 % », qui declare pourtant color:#0a0a0a en inline, sortait
   en blanc sur lime, soit 1,19:1. Tout element dont le fond inline est le
   lime de la marque recupere donc le texte noir. */
cart-drawer [style*="background:#adff00"],
cart-drawer [style*="background: #adff00"],
cart-drawer [style*="background:#ADFF00"] {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
}
/* l accent du delai de livraison etait reste en vert fonce sur le noir */
cart-drawer .dl-rc-live b,
cart-drawer .dl-rc-live strong,
cart-drawer .dl-rc-live .dl-rc-live-txt b {
  color: #adff00 !important;
  -webkit-text-fill-color: #adff00 !important;
}
/* le prix barre du total : 3,72:1, on le remonte sans le rendre bavard */
cart-drawer .cart-drawer__footer s,
cart-drawer .cart-drawer__footer del,
cart-drawer [class*="footer"] s {
  color: #9a9a9a !important;
  -webkit-text-fill-color: #9a9a9a !important;
}

/* le sous-titre du bandeau cadeau, hors de toute classe utilitaire */
cart-drawer .psg-gl__sub, cart-drawer .psg-gl__txt {
  color: #f4fff0 !important;
  -webkit-text-fill-color: #f4fff0 !important;
}

/* ==== la reassurance, version minimaliste ====
   trust-icons rend un carrousel sur telephone : UNE garantie a la fois, et un
   bloc de 291 px de haut. Farouk : « pas un gros block, minimaliste, simple ».
   On garde l icone et le titre, on retire la phrase de description : les
   quatre promesses tiennent alors sur deux lignes discretes, lues d un coup.
   🚨 Ne pas masquer « p:not(:first-child) » : dans cet item le premier enfant
   est le SVG, la regle emporte donc le titre avec la description. On nomme la
   classe exacte, .text-subdued. */
@media (max-width: 749px) {
  [id*=sa_reassurance] scroll-carousel.trust-icons__carousel {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-flow: row !important;
    overflow-x: visible !important;
    gap: 12px 10px !important;
  }
  [id*=sa_reassurance] .trust-icons__item {
    width: auto !important; min-width: 0 !important; max-width: none !important;
  }
  [id*=sa_reassurance] .trust-icons__item .prose {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
  }
  [id*=sa_reassurance] .trust-icons__item svg {
    width: 16px !important; height: 16px !important; flex: 0 0 16px !important;
  }
  [id*=sa_reassurance] .trust-icons__item p.text-subdued { display: none !important; }
  [id*=sa_reassurance] .trust-icons__item p.subheading {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-transform: none !important;
  }
  [id*=sa_reassurance] .scroll-markers,
  [id*=sa_reassurance] [class*=scroll-marker] { display: none !important; }
}

/* ==== les etoiles des avis ====
   Elles arrivent en #00b67a, le vert de Trustpilot : ça evoque un service
   d avis tiers que la boutique n utilise pas.
   La section avis etant passee sur fond noir, le lime de la marque y tient
   sans probleme (11,9:1) — ce qui n aurait pas ete le cas sur les cartes
   blanches de la version precedente, ou il tombait a 1,3:1. */
[id*=reviews] .icon-star-rating,
[id*=reviews] svg.icon-star-rating {
  fill: #adff00 !important;
  color: #adff00 !important;
}
/* la variante sur fond clair, si la section repasse en schema clair un jour */
[class*=tst-stars] rect,
[class*=tst-stars] svg rect,
[class*=tst-stars] path {
  fill: #3f6b0c !important;
}