/** Shopify CDN: Minification failed

Line 341:27 Unexpected "*"

**/
/* WINTER CLUB V4 Brand Override Layer */
:root{--dl-brand:#0A0A0A;--dl-brand-soft:#F2F2F2;--dl-brand-softer:#FAFAFA;--dl-ink:#0A0A0A;--dl-paper:#FFFFFF;--dl-paper-soft:#FAFAFA;--dl-glow:0 14px 40px rgba(0,0,0,.45);}

/* FONTS */
body,.theme,[class*="font-body"],button,input,select,textarea{font-family:"Inter",system-ui,sans-serif!important;}
/* WINTER CLUB : titres en Anton, la grotesque lourde et etroite du visuel « 1 = 1 ».
   Droite, jamais italique, toujours en capitales comme le logo. */
h1,h2,h3,h4,h5,h6,[class*="heading"],[class*="title"]{font-family:'Anton',"Archivo",system-ui,sans-serif!important;font-style:normal!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.01em!important;}
/* Les prix restent en Inter avec des chiffres a chasse fixe : ils s alignent en colonne
   dans les grilles sans prendre l air technique d une police a chasse fixe. */
[class*="price"],.money,[data-money],[class*="amount"]{font-family:"Inter",system-ui,sans-serif!important;font-weight:600!important;font-variant-numeric:tabular-nums!important;}
::selection{background:var(--dl-brand);color:#fff;}

/* BUTTONS pill WINTER CLUB */
.button,button.button,[class*="button"]:not(.dl-qv-pill),.btn,button[name="add"],.product-form__submit,[class*="cta"]{border-radius:0!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 */
/* angles droits : la charte de la boutique (button, input et subheading sont
   tous a 0 dans les reglages ; ce !important les contredisait) */
[class*="badge"],[class*="sale-tag"]{border-radius:0!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:0!important;overflow:hidden;}
.product-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.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:0!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(0,0,0,.15)!important;}

/* LINKS */
/* 🚨 La regle de survol des liens qui forcait la teinte de marque est retiree :
   cette teinte vaut #0A0A0A et la boutique est noire — chaque lien devenait
   invisible sous le doigt. Aucune couleur en dur ne convient ici (pages
   sombres ET panier clair), donc on laisse le theme gerer son propre survol.
   Ne pas remettre de couleur ici : c est la faute d origine. */

/* 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:'Anton',system-ui,sans-serif!important;font-style:normal!important;font-weight:600!important;}

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

/* NEWSLETTER */
/* 🚨 Le degrade clair force ici est retire : la couleur de la section vient de
   son color_scheme, pas d une surcharge. Il etait masque par le bloc colore,
   mais il repeignait la section en 250/255/242 juste dessous. */
/* Bouton principal de la boutique : BLANC, texte noir, angles droits — mesure
   faite sur .wc-penderie__cta. Il etait en #0A0A0A sur une section #0A0A0A. */
[class*="newsletter"] button[type="submit"]{background:#FFFFFF!important;color:#0A0A0A!important;-webkit-text-fill-color:#0A0A0A!important;border-radius:0!important;}
[class*="newsletter"] button[type="submit"]:hover{background:#E4E4E4!important;}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}
/* === WINTER CLUB 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:'Anton',system-ui,sans-serif!important;
  font-style:normal!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;
}

/* === WINTER CLUB logo prominent === */
.header__logo {
  display: flex !important;
  align-items: center;
  text-decoration: none !important;
}
.header__logo-text.heading {
  font-family:'Anton','Inter',sans-serif!important;
  font-style:normal!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:'Anton','Inter',sans-serif!important;
  font-style:normal!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(0,0,0,.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:'Anton',system-ui,sans-serif!important;
  font-style:normal!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: #0A0A0A !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;
}


/* === WINTER CLUB logo HERO (final authoritative override) === */
.header__logo-image-injected,
.header__logo img,
.header__logo-image,
.header__logo-image-wrapper img {
  height: 112px !important;
  max-height: 170px !important;
  min-height: 112px !important;
  width: auto !important;
  max-width: 420px !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: 150px !important;
    max-height: 200px !important;
    min-height: 150px !important;
  }
}
.header__logo,
.header,
.shopify-section--header > .header { min-height: 110px !important; }


/* === WINTER CLUB 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: #0A0A0A !important;
  color: #FFFFFF !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: 10 10 10 !important;
  --button-text-color: 255 255 255 !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: #2A2A2A !important;
}

/* ================================================================
   WINTER CLUB 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;
  }
}
/* ================================================================
   WINTER CLUB 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%);
  }
}
/* ================================================================
   WINTER CLUB 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: 0 !important;
    border: 1px solid #E5E5E5 !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: #6B6B6B !important;
  }
  .featured-collections-header__tab-list [role="tab"][aria-selected="true"] {
    background: #0A0A0A !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !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; }
}

/* ================================================================
   WINTER CLUB 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;
  }
}


/* WINTER CLUB: 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 WINTER CLUB : 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: #0A0A0A !important;
  color: #FFFFFF !important;
}
.product-card__quick-buy product-form button.button:hover {
  background: #2A2A2A !important;
}


/* WINTER CLUB: 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;
  }
}


/* ===== WINTER CLUB : 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: #F2F2F2 !important; transition: color .15s ease; }
.footer a:not(.button):hover,
.footer a:not(.button):focus-visible { color: #FFFFFF !important; }
.footer .footer__block-title,
.footer h2, .footer h3, .footer .h5 { color: #FFFFFF !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; }


/* ===== WINTER CLUB : 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: #4A4A4A !important; }
.dl-reserved svg, .dl-rc-ico svg { color: #4A4A4A !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: #4A4A4A !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: #FFFFFF !important; letter-spacing: .04em; }
.collection-list__item:hover .v-stack p { color: #FFFFFF !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: #FFFFFF !important; letter-spacing: .04em; }
.collection-list__item:hover .prose p { color: #FFFFFF !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: #FFFFFF !important; }
.collection-list__item:hover .prose p { color: #FFFFFF !important; }


/* ==================== WINTER CLUB / 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: #FFFFFF !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: #FFFFFF !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: #FFFFFF !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: #0A0A0A !important; color: #FFFFFF !important; border-color: #FFFFFF !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: #0A0A0A !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
  border: 0 !important;
  box-shadow: 0 5px 0 #0A0A0A, 0 10px 22px rgba(0,0,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: #2A2A2A !important;
  box-shadow: 0 2px 0 #0A0A0A, 0 6px 16px rgba(0,0,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 #0A0A0A, 0 3px 10px rgba(0,0,0,.25);
  transform: translateY(5px);
}

/* ---------- 3. Halo lime sous les appels a l action ---------- */
.color-scheme--scheme-sa-dark .product-card:hover {
  border-color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.25), 0 0 26px rgba(0,0,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(0,0,0,.35);
  font-weight: 800;
}


/* ==================== WINTER CLUB / 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: #FFFFFF !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; }


/* ==================== WINTER CLUB / 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: #0A0A0A !important;
  /* angles droits : c est la charte depuis les lots 8 a 11, et quatre pilules
     alignees sur une page entierement carree sautaient aux yeux */
  border-radius: 0 !important;
  padding: 6px 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: #FFFFFF !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: #FFFFFF !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; }


/* ==================== WINTER CLUB / 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%, #0A0A0A 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, #FFFFFF 43%, #FFFFFF 50%, #FFFFFF 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: #FFFFFF !important; }
.color-scheme--scheme-1 .collection-list__item .display-s { color: #0a0a0a !important; }


/* le script ne remet en marche que ce qui est a l ecran */
.wc-vedette__titre.wc-anime,
.wc-penderie__titre.wc-anime,
.sa-tp__h.wc-anime,
.dl-faqf__h.wc-anime,
[id*="__sa_qualite"] .h2.wc-anime,
[id*="__newsletter"] .h2.wc-anime {
  animation-play-state: running;
}

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

/* ==================== WINTER CLUB / 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: #FFFFFF !important; }
/* les etoiles gardent le lime : elles sont le seul signal positif du bloc info */
.product-card .rating-badge svg { color: #0A0A0A !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: #4A4A4A !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: #4A4A4A !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. */
/* ===== COMPTEUR DU PANIER — SOURCE UNIQUE =====
   🚨 Ne definir la pastille NULLE PART ailleurs. Elle etait ecrite dans
   layout/theme.liquid, dans sections/header.liquid (deux fois, en noir puis en
   blanc) et ici deux fois : largeur d un fichier, hauteur d un autre, position
   d un troisieme. Les quatre autres ont ete retirees le 26/09.

   Placement : le <li> du panier finit a x=373 et l icone occupe 333→357.
   top 4 / right 8 pose la pastille de 20 px sur 345→365 — elle mord le coin
   haut-droit de l icone, et garde 28 px avec le bord de l ecran (contre 1 px
   avant, ou elle paraissait rognee). */
header cart-count.header__active-dot,
.header__cart-link cart-count.header__active-dot,
.header__cart-link .header__active-dot {
  position: absolute !important;
  top: 4px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  inset-inline-end: 8px !important;
  inset-block-start: 4px !important;
  transform: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  /* le cerne noir detache la pastille de l icone blanche qu elle recouvre */
  box-shadow: 0 0 0 2px #0A0A0A !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}
/* le nombre vit dans un <span class="sr-only"> : le theme ne l affichait qu aux
   lecteurs d ecran. On le sort de son isolement — sans lui, la pastille serait
   un point muet. Il herite la couleur de la pastille, jamais une couleur en dur. */
cart-count.header__active-dot .sr-only {
  -webkit-text-fill-color: inherit !important;
  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: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !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: 0 !important;
}

/* 🚨 « cernes de LIME » a l origine : la bordure devait etre lime, elle est
   passee au noir avec le reste et est devenue invisible sur le tiroir noir.
   Meme contour que le bandeau du dessous : les deux ne font qu un panneau. */
cart-drawer.drawer--cart .dl-prot-btn,
cart-drawer.drawer--cart .dl-prot-btn:hover {
  background: rgba(255,255,255, .05) !important;
  border-color: rgba(255,255,255, .18) !important;
}
cart-drawer.drawer--cart .dl-prot-btn.is-on {
  background: rgba(255,255,255, .10) !important;
  border-color: rgba(255,255,255, .38) !important;
}
cart-drawer.drawer--cart .dl-rc-live {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  /* le filet interne est plus discret que le pourtour */
  border-top-color: rgba(255, 255, 255, .12) !important;
}
cart-drawer.drawer--cart .dl-reserved,
cart-drawer.drawer--cart .psg-gl {
  background: rgba(255,255,255, .05) !important;
  border-color: rgba(255,255,255, .14) !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: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* 🚨 BLOC ANNULE (lot 81). Il repeignait le bouton de commande et
   « CHOISIR » en #0A0A0A avec un libelle blanc, heritage de l epoque ou
   l accent etait lime. Les deux boutons sont BLANCS a face pleine depuis les
   lots 76 et 80, avec un libelle NOIR : ces regles disaient exactement
   l inverse de ce que fait la page. Elles etaient deja battues par les blocs
   plus bas, donc rien ne change a l ecran — mais une feuille qui se contredit
   finit par tromper celui qui la relit.
   Les couleurs de ces deux boutons se reglent desormais UNIQUEMENT dans les
   lots 76 et 77. */

/* 🚨 BLOC CORRIGE (lot 81). Il mettait l interrupteur de la protection en
   #0A0A0A quand il est ACTIF : noir sur un tiroir noir, l etat actif ne se
   voyait plus. Un interrupteur doit d abord montrer qu il est allume.
   Sa specificite (0,4,1) battait la regle correcte du tiroir (0,3,1), d ou un
   bouton qui ne changeait visiblement pas quand on le cochait. */
cart-drawer.drawer--cart .dl-prot-btn.is-on .dl-prot-box {
  background: #FFFFFF !important;
  border-color: #FFFFFF !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: #FFFFFF !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 (#FAFAFA) 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(0,0,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: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !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: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !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 commentaire d origine disait « le bouton sortait en vert sur LIME ».
   Le fond est passe au noir de la charte, le libelle est reste noir : le
   bouton est devenu un rectangle vide. Sur du noir, le libelle est BLANC. */
cart-drawer .product-cross-sell button,
cart-drawer .product-cross-sell button * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
cart-drawer .product-cross-sell button {
  background: #0A0A0A !important;
  transform: none !important;
  box-shadow: none !important;
  border-radius: 0 !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: #FFFFFF !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: #FFFFFF } » 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:#0A0A0A"],
cart-drawer [style*="background: #0A0A0A"],
cart-drawer [style*="background:#0A0A0A"] {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !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: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !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: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !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: #0A0A0A !important;
  color: #0A0A0A !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: #4A4A4A !important;
}

/* ===== LOT 1 — corrections mesurees le 25/09 ===== */

/* 1. 🚨 Bloc retire : il rustinait une position que le bloc « COMPTEUR DU
   PANIER » ci-dessus definit maintenant entierement. Deux blocs pour un meme
   badge, c est ce qui donnait right:-18,97px sans que personne l ait ecrit. */
/* le bouton panier lui-meme doit laisser la place au badge */
[id$="__header"] a[href*="/cart"] { margin-right: 6px !important; }
[id$="__header"] .header__icon-list,
[id$="__header"] > * { overflow: visible !important; }
/* filet : plus rien ne depasse la largeur de l ecran */
body, #MainContent { overflow-x: clip !important; }

/* 2. Les fleches du bandeau d annonce faisaient 10x10 px. Apple demande 44x44
   minimum, en dessous c est intapable au pouce. On agrandit la ZONE tactile sans
   grossir le dessin, avec un pseudo-element transparent. */
[id*="announcement"] button,
[id*="announcement"] [class*="slideshow-control"],
[id*="announcement"] [aria-label*="récédent"],
[id*="announcement"] [aria-label*="uivant"] {
  position: relative !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
[id*="announcement"] button::after {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
}

/* 3. Les blocs de reassurance n ont pas de fond a eux : pose sur une zone sombre,
   leur texte en #0A0A0A devient noir sur noir. On force l heritage du schema
   de couleur au lieu du noir en dur. */
[class*="trust-icon"], [id*="trust-icons"],
[class*="reassurance"], [id*="reassurance"] {
  color: inherit !important;
}
[class*="trust-icon"] svg, [id*="trust-icons"] svg,
[class*="reassurance"] svg, [id*="reassurance"] svg {
  color: currentColor !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* ===== LOT 2 — prix barre lisible (mesure 25/09) ===== */

/* 🚨 MESURE : prix barre en rgb(107,107,107) sur fond rgb(10,10,10) = 3,72:1,
   la ou WCAG demande 4,5:1 — et a 10px dans les grilles. L ecart de prix, qui
   est l argument de vente, etait donc invisible.

   🚨 POURQUOI MA PREMIERE VERSION N A RIEN FAIT : je visais [class*="price"],
   mais le theme est en FRANCAIS — les classes sont wc-vedette__prix et
   wc-penderie__prix. Aucun match. La regle gagnante est un simple
   « s, del { color: … !important } » : il faut viser la balise, et passer
   APRES elle dans le fichier pour gagner a egalite de specificite. */
s, del,
.price--compare, .price__compare, [class*="compare"] {
  color: #9A9A9A !important;
  opacity: 1 !important;
  text-decoration-thickness: 1.5px !important;
  text-decoration-color: #8A8A8A !important;
}
/* sur fond clair le meme gris serait trop pale */
.color-scheme--scheme-1 s, .color-scheme--scheme-1 del,
.color-scheme--scheme-4 s, .color-scheme--scheme-4 del {
  color: #5C5C5C !important;
  text-decoration-color: #8A8A8A !important;
}

/* Le bloc prix des vignettes etait a 10-11px : illisible sur mobile, et l ecart
   ne sautait pas aux yeux. On remonte le prix courant et on garde le barre en
   retrait, sans inverser la hierarchie. */
.wc-penderie__prix { font-size: 14px !important; font-weight: 700 !important; }
.wc-penderie__prix s { font-size: 12px !important; font-weight: 400 !important; margin-left: 4px; }
.wc-vedette__prix { font-size: 24px !important; }
.wc-vedette__prix s { font-size: 16px !important; margin-left: 6px; }


/* ===== LOT 3 — taille des vignettes et bloc prix (mesure iPhone 393px) ===== */

/* 🚨 MESURE iPhone 393px : .wc-penderie__item etait a « width: 27vw » = 106px,
   soit 4 doudounes par rangee, image a 99x132. Illisible.
   Et le bloc prix, en « white-space: nowrap » dans ces 99px, devait caser
   « €179,00 €359,00 » : les deux prix ne rentraient pas, d ou le rendu casse.
   Elargir la vignette regle les deux d un coup.
   44vw = 173px → 2 vignettes pleines + un tiers qui depasse, ce qui montre
   a la cliente qu elle peut faire defiler. */
#shopify-section-template--27073294631159__penderie_doudounes .wc-penderie__item,
#shopify-section-template--27073294631159__penderie_bonnets .wc-penderie__item,
.wc-penderie__item {
  width: 44vw !important;
  max-width: 200px !important;
}
/* le prix peut enfin respirer : on autorise le retour a la ligne en secours */
.wc-penderie__prix {
  white-space: normal !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}
.wc-penderie__prix s {
  font-size: 13px !important;
  margin-left: 6px !important;
  white-space: nowrap !important;
}
/* le nom du produit suivait la meme echelle minuscule */
.wc-penderie__legende { font-size: 11px !important; letter-spacing: .1em !important; }

/* au-dela de 750px le theme repasse en « flex: 1 1 0 », on ne le contrarie pas */
@media (min-width: 750px) {
  .wc-penderie__item { width: auto !important; max-width: 240px !important; }
  .wc-penderie__prix { font-size: 14px !important; }
}

/* ===== LOT 4 — lisibilite et zones tactiles (mesure iPhone) ===== */

/* 1. Le libelle de couleur sous chaque vignette etait a 10px : sous le seuil
   de lisibilite mobile, et c est l information qui distingue les 7 entrees
   du rail (Noir, Blanc, Taupe, Champagne…). */
.wc-penderie__couleur {
  font-size: 12px !important;
  letter-spacing: .1em !important;
  opacity: .85 !important;
}

/* 2. Les liens du pied de page portent deja « link-tap-area », donc le theme
   PREVOIT une zone tactile — elle ne s applique juste pas : mesure a 14px de
   haut. On la rend effective sans decaler la mise en page, avec un
   pseudo-element qui deborde. */
[id$="__footer"] a.link-tap-area,
[id$="__footer"] a.link-reversed {
  position: relative !important;
  display: inline-block !important;
  padding-block: 6px !important;
}
[id$="__footer"] a.link-tap-area::after {
  content: "" !important;
  position: absolute !important;
  inset: -11px -6px !important;
}
/* 🚨 Elargir la zone ne suffit PAS : mesure faite, « Rechercher » et « Contact »
   atteignaient 44px mais « Accueil » et « Catalogue » plafonnaient a 34px.
   Ce sont les deux liens pris en sandwich : leurs zones elargies se cognaient
   a celles des voisins. Il faut donc aussi ECARTER les liens verticalement. */
[id$="__footer"] ul li + li,
[id$="__footer"] nav li + li { margin-top: 14px !important; }
[id$="__footer"] ul, [id$="__footer"] nav ul { row-gap: 14px !important; }

/* 3. « Suivre ma commande » etait a 40px, soit 4px sous le minimum d Apple.
   🚨 On ne touche PAS aux liens en plein texte (« page contact »,
   « guide des tailles ») : les grossir casserait l interligne du paragraphe.
   La regle des 44px vise les controles, pas les liens inline. */
a[href*="suivi"], a[href*="commande"], .dl-faqf__all {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ===== LOT 5 — bouton panier invisible, tailles, textes 11px ===== */

/* 🚨🚨 LE PLUS GRAVE DE LA SESSION. Mesure sur la fiche produit, vue iPhone :
   le bouton « Ajouter au panier » affiche (BUTTON.button w-full, 235x48,
   type=submit) avait un fond rgb(10,10,10) ET un texte rgb(10,10,10).
   Contraste 1:1 : la cliente voyait un rectangle noir VIDE.
   Les variantes cachees du meme bouton, elles, etaient bien en blanc — seule
   celle reellement affichee etait cassee, ce qui explique que ca passe inapercu
   en relisant le code. */
form[action*="/cart/add"] button[type="submit"]:not(.button--outline),
form[action*="/cart/add"] button[type="submit"]:not(.button--outline) button-content,
form[action*="/cart/add"] button[type="submit"]:not(.button--outline) .button__content,
button.button:not(.button--outline):not(.button--secondary) button-content,
button.button:not(.button--outline):not(.button--secondary) .button__content {
  color: #FFFFFF !important;
}
/* le bouton en contour garde son texte sombre, il est sur fond clair */
.button--outline, .button--outline button-content, .button--outline .button__content {
  color: #0A0A0A !important;
}

/* Les selecteurs de taille faisaient 56x35 : ce sont les controles les plus
   utilises de la fiche, et ils etaient sous les 44px d Apple. */
/* 🚨 MA PROPRE ERREUR, corrigee : la regle visait « fieldset label » en general.
   Elle attrapait donc aussi les pastilles de couleur des CARTES PRODUIT de la
   section « produits similaires », qui font 19px de large : etirees a 44px de
   haut, elles paraissaient cassees. C est ce que Farouk a vu comme « bug des
   boutons de couleur » sur la fiche Abbaye — un swatch « Champagne » ecrase,
   qui appartenait en fait a la Maya 70 affichee en produit similaire.
   On ne vise plus que le selecteur du formulaire principal. */
.product-information form[action*="/cart/add"] > variant-picker label,
.product-information form[action*="/cart/add"] fieldset label,
variant-picker fieldset label {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* les pastilles des cartes produit gardent leur taille d origine */
product-card .color-swatch,
.product-card__swatch-list label,
.product-card .color-swatch {
  min-height: 0 !important;
  display: inline-block !important;
}

/* Textes a 11px sur la fiche : la promesse « 1 doudoune = 1 bonnet », l offre
   temporaire et les caracteristiques matiere. C est ce qui convainc, ca ne peut
   pas etre le plus petit texte de la page. */
.product-information [class*="subheading"],
.product-information p,
[class*="product-info"] p { font-size: max(1em, 12.5px) !important; }

/* ===== LOT 7 — hierarchie des boutons d achat + choix de la qualite ===== */

/* ---- les deux boutons d achat ----
   « Ajouter au panier » et « Acheter maintenant » etaient deux pleins noirs
   identiques : aucune hierarchie, le client ne sait pas lequel appuyer.
   Le cisaille noir reste l action principale. L achat direct devient une
   action secondaire : cerclee, fond blanc, angles droits comme la charte. */
.shopify-payment-button__button,
.shopify-payment-button__button *,
.buy-now-fallback,
.buy-now-fallback * {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}
.shopify-payment-button__button,
.buy-now-fallback {
  background: #FFFFFF !important;
  background-image: none !important;
  border: 2px solid #0A0A0A !important;
  border-radius: 0 !important;
  min-height: 48px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease;
}
.shopify-payment-button__button:hover,
.buy-now-fallback:hover { background: #0A0A0A !important; }
.shopify-payment-button__button:hover,
.shopify-payment-button__button:hover *,
.buy-now-fallback:hover,
.buy-now-fallback:hover * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* ---- UN SEUL pave pour toutes les options ----
   Les tailles etaient des cadres gris tres pales (bordure #E7E7E7 sur blanc,
   soit 1,2:1 : on ne voyait pas les limites de la case) et la qualite avait
   encore un autre aspect. Meme composant partout, meme etat « choisi ». */
.variant-picker__option .block-swatch {
  border: 2px solid #D2D2D2 !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.variant-picker__option .block-swatch,
.variant-picker__option .block-swatch * {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}
.variant-picker__option .block-swatch:hover { border-color: #8A8A8A !important; }

/* choisi : plein noir. Sans cela, « selectionne » se resumait a une bordure
   un peu plus foncee, invisible au premier coup d oeil sur telephone. */
.variant-picker__option input:checked + .block-swatch {
  background: #0A0A0A !important;
  border-color: #0A0A0A !important;
}
.variant-picker__option input:checked + .block-swatch,
.variant-picker__option input:checked + .block-swatch * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* la case est en sr-only : le focus clavier doit se voir sur l etiquette */
.variant-picker__option input:focus-visible + .block-swatch {
  outline: 2px solid #0A0A0A !important;
  outline-offset: 2px;
}

/* ---- le choix de la qualite ----
   🚨 Ce bloc grossissait les deux cartes (52 px de haut, Anton 15 px) pour
   qu elles portent une legende expliquant Standard vs Max. Farouk a fait
   RETIRER cette legende — voir la ligne juste en dessous. L agrandissement a
   donc perdu sa raison d etre, et il ne restait que deux gros boutons dans une
   police differente de celle des tailles : le MEME composant
   (label.block-swatch) rendu dans deux systemes visuels sur la meme page.
   Mesure avant : Taille 56x44 en Inter 11 px, Qualite 172x49 en Anton 15 px.

   On garde la grille deux colonnes — il n y a que deux choix, et une large
   cible se tape mieux au pouce — et on aligne tout le reste sur les swatches
   de taille. Ne pas regrossir sans remettre une legende avec.
   Le crochet [data-option] est pose dans snippets/variant-picker.liquid. */
/* ===== LOT « Standard / Max » (28/09) — ces deux regles sont NEUTRALISEES =====

   Elles imposaient une grille deux colonnes et un libelle centre en flex. L offre est
   maintenant presentee en LIGNES EMPILEES, chacune avec sa vignette, son libelle et son
   prix — la forme d un choix d offre, pas d un choix de taille.

   🚨 Elles ne pouvaient pas simplement etre surchargees : leurs selecteurs sont prefixes
      par « .variant-picker__option[data-option="qualite"] », donc plus specifiques que
      ceux du snippet. A « !important » egal, c est la specificite qui tranche, et ces
      regles gagnaient : les lignes sortaient a 190 px au lieu de 390 et le prix etait
      coupe. Corriger ICI plutot que d empiler une couche de plus.

   Tout ce qui concerne Standard/Max vit desormais dans « snippets/wc-qualite.liquid »,
   pose depuis layout/theme.liquid, et qui sert AUSSI le modal d ajout rapide et le rappel
   de la vedette. Un seul endroit a reprendre.

   Conserve tel quel ci-dessous pour l historique. Pour revenir en arriere : retirer le
   commentaire, et retirer le rendu du snippet dans layout/theme.liquid.

.variant-picker__option[data-option="qualite"] .variant-picker__option-values {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px !important;
  width: 100%;
}
.variant-picker__option[data-option="qualite"] .block-swatch {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0 !important;
  padding: 10px 8px !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
===== fin du bloc neutralise ===== */


/* ===== LOT 11 — angles droits partout ===== */

/* Releve fait au navigateur sur l accueil et une fiche produit : voici tout ce
   qui restait arrondi. Les vraies pastilles rondes (icones 40x40, compteur du
   panier, vignettes de couleur) sont volontairement laissees rondes. */
.sa-tp-card,          /* cartes d avis de l accueil */
.cs-rev-card,         /* cartes d avis de la fiche produit */
.dl-rc,               /* bloc rassurance / cadeau */
badge-list,
.badge-list,
[class*="ai-ugc-video-card"] {   /* vignettes video de l application UGC */
  border-radius: 0 !important;
}


/* ===== LOT 12 — options a valeur unique + caractere ✦ ===== */

/* ---- une option qui n a qu une valeur n est pas un choix ----
   La Huppe n existe qu en noir : « Couleur : Noir » avec une seule vignette
   donnait l impression qu il manquait des coloris. On masque la ligne.
   🚨 display:none et pas de suppression du balisage : les boutons radio
      servent au theme pour retrouver la variante. */
.variant-picker__option[data-option-valeurs="1"] { display: none !important; }

/* ---- Anton ne contient pas ✦ (U+2726) ----
   Les surtitres « ✦ La piece de la campagne » sont en Anton. Selon les polices
   installees, le caractere peut sortir en carre vide. On complete la famille
   pour CE SEUL point de code : partout ou Anton est demandee, le navigateur
   ira chercher le symbole dans une police systeme, sans rien changer d autre.
   Si aucune de ces polices n existe, on retombe sur le comportement actuel :
   cette regle ne peut qu ameliorer les choses. */
@font-face {
  font-family: 'Anton';
  src: local('Apple Symbols'), local('Segoe UI Symbol'),
       local('Noto Sans Symbols 2'), local('DejaVu Sans'), local('Arial Unicode MS');
  unicode-range: U+2726;
}

/* ===== LOT 13 — zone tactile des pastilles de couleur ===== */

/* 19x14 px mesures au navigateur, ecart de 6 px, rien au-dessus ni dessous.
   On etend la zone de 15 px en haut et en bas (44 px au total) et de 3 px de
   chaque cote (25 px), ce qui passe le minimum WCAG de 24x24 sans que deux
   pastilles voisines se chevauchent.
   🚨 La pastille garde sa taille : c est le ::after transparent qui recoit le
      doigt. Agrandir la pastille elle-meme l etire en barre — deja essaye,
      deja signale comme un bug. */
.color-swatch,
.product-card__swatch-list label { position: relative; }

.color-swatch::after,
.product-card__swatch-list label::after {
  content: '' !important;
  position: absolute !important;
  inset: -24px -3px -4px !important;
  border: 0 !important;
  background: none !important;
  pointer-events: auto;
}

/* 🚨 CE QUI BLOQUAIT LA HAUTEUR : le ::after faisait bien 42 px (style calcule
   verifie au navigateur), mais « div.product-card__swatch-list » porte
   « overflow: hidden » et ne fait que 14 px de haut — exactement la hauteur
   d une pastille. La zone tactile etait donc rognee a la taille de ce qu elle
   devait agrandir.
   On ne peut pas ecrire overflow-y: visible avec overflow-x: hidden : le
   navigateur transforme « visible » en « auto » et ajoute une barre de
   defilement. On agrandit donc la boite de rognage par du remplissage, et on
   annule l encombrement par une marge negative egale : la mise en page ne
   bouge pas d un pixel. */
.product-card__swatch-list {
  padding-block: 24px 4px !important;
  margin-block: -24px -4px !important;
}


/* ===== LOT 18 — le bouton de commande s inverse ===== */

/* Le tiroir est noir et le bouton l etait aussi : le libelle se lisait, mais
   le bouton n avait aucune forme. On l inverse — fond blanc, texte noir — ce
   qui en fait le seul element clair du bas du tiroir, donc le point d arrivee
   evident du regard. */
cart-drawer button[name="checkout"] {
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 52px !important;
}
cart-drawer button[name="checkout"],
cart-drawer button[name="checkout"] * {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
}
cart-drawer button[name="checkout"]:hover {
  background: #DEDEDE !important;
}


/* ===== LOT 19 (reecrit le 26/09) — la modale du bonnet offert, en SOMBRE ===== */

/* 🚨 Ce bloc disait « garde sa palette claire » et forcait le texte en #1A1A1A.
   La modale est passee en sombre ; il la ramenait en arriere et gagnait la
   cascade d un point : « cart-drawer .psg-modal .psg-modal__ttl » = (0,2,1)
   contre (0,2,0) pour les regles ecrites ensuite. Trois tentatives de
   correction ont echoue AVANT de trouver ce bloc.
   Ne pas rajouter de regle par-dessus : c est ICI qu on change les valeurs. */
cart-drawer .psg-modal .psg-modal__ttl,
cart-drawer .psg-modal .psg-upsell__name,
cart-drawer .psg-modal .psg-upsell__name * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
cart-drawer .psg-modal .psg-upsell__price-now,
cart-drawer .psg-modal .psg-upsell__price-now * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
cart-drawer .psg-modal .psg-upsell__price-old,
cart-drawer .psg-modal .psg-upsell__price-old * {
  color: rgba(255,255,255,.45) !important;
  -webkit-text-fill-color: rgba(255,255,255,.45) !important;
  text-decoration-color: rgba(255,255,255,.45) !important;
}
cart-drawer .psg-modal .psg-upsell__title {
  color: rgba(255,255,255,.62) !important;
  -webkit-text-fill-color: rgba(255,255,255,.62) !important;
}
/* la pastille d aide reste a fond BLANC : son texte doit donc rester noir */
cart-drawer .psg-modal .psg-upsell__hint {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}
/* le menu deroulant de taille : champ creuse d un cran sous la surface */
cart-drawer .psg-modal select,
cart-drawer .psg-modal select option,
cart-drawer .psg-modal .psg-upsell__size {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background-color: #1C1C1C !important;
}
/* la croix de fermeture */
cart-drawer .psg-modal .psg-modal__x,
cart-drawer .psg-modal .psg-modal__x * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
cart-drawer .psg-modal .psg-modal__x {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 0 !important;
}
/* 🚨 Le bouton est en fond BLANC depuis la charte du tiroir : son libelle doit
   etre NOIR. L ancienne version le forcait en blanc — blanc sur blanc. */
cart-drawer .psg-modal .psg-upsell__btn,
cart-drawer .psg-modal .psg-upsell__btn * {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}


/* ===== LOT 21 — le tiroir panier en monochrome ===== */

/* ---- le voile de la modale ----
   rgba(40,12,26,.5) : un violet-bordeaux qui teintait tout le tiroir en prune
   des que la modale du cadeau s ouvrait. Voile neutre. */
cart-drawer .psg-modal__bd,
.psg-modal__bd {
  background: rgba(0, 0, 0, .62) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ---- les accents verts ----
   Seules taches de couleur d une boutique noir et blanc. La pastille garde sa
   pulsation : c est elle qui dit « en direct », pas la teinte. */
cart-drawer .dl-rc-live-dot,
.drawer--cart .dl-rc-live-dot {
  background: #FFFFFF !important;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .45) !important;
}
cart-drawer .dl-prot-shield,
.drawer--cart .dl-prot-shield {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
cart-drawer .dl-prot-btn.is-on,
.drawer--cart .dl-prot-btn.is-on {
  border-color: rgba(255, 255, 255, .45) !important;
  background: rgba(255, 255, 255, .07) !important;
}
cart-drawer .dl-prot-btn.is-on .dl-prot-box,
.drawer--cart .dl-prot-btn.is-on .dl-prot-box {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
cart-drawer .dl-prot-btn.is-on .dl-prot-box svg {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}
/* les bordures vert pale des deux bandeaux du bas */
cart-drawer .dl-rc-live,
cart-drawer .dl-prot-btn,
.drawer--cart .dl-rc-live,
.drawer--cart .dl-prot-btn {
  border-color: rgba(255, 255, 255, .14) !important;
}

/* ---- le bloc de confirmation du cadeau ----
   Vert pastel avec texte vert fonce : hors charte, et illisible sur le noir. */
cart-drawer .psg-done,
.drawer--cart .psg-done {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .22) !important;
}
cart-drawer .psg-done__txt strong,
cart-drawer .psg-done__txt span,
cart-drawer .psg-done__txt,
.drawer--cart .psg-done__txt strong,
.drawer--cart .psg-done__txt span {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
cart-drawer .psg-done__txt span,
.drawer--cart .psg-done__txt span {
  color: #B5B5B5 !important;
  -webkit-text-fill-color: #B5B5B5 !important;
}
cart-drawer .psg-done__change,
.drawer--cart .psg-done__change {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  border-radius: 0 !important;
}
cart-drawer .psg-done__change,
cart-drawer .psg-done__change *,
.drawer--cart .psg-done__change,
.drawer--cart .psg-done__change * {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}


/* ===== LOT 22 — protection + livraison = un seul panneau ===== */

/* --- le panneau, d un bloc --- */
cart-drawer .dl-prot-btn,
.drawer--cart .dl-prot-btn {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
}
cart-drawer .dl-rc-live,
.drawer--cart .dl-rc-live {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  /* filet interne : c est la seule separation entre les deux parties */
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  padding: 8px 14px !important;
}
/* meme a l etat actif, le panneau garde son contour : seule la teinte bouge */
cart-drawer .dl-prot-btn.is-on,
.drawer--cart .dl-prot-btn.is-on {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  border-bottom: 0 !important;
}

/* --- le bouton bascule --- */
/* etat inactif : il sortait en #cbd5d1, un gris-vert hors charte */
cart-drawer .dl-prot-box,
.drawer--cart .dl-prot-box {
  background: rgba(255, 255, 255, .26) !important;
  border-color: rgba(255, 255, 255, .26) !important;
}
cart-drawer .dl-prot-btn.is-on .dl-prot-box,
.drawer--cart .dl-prot-btn.is-on .dl-prot-box {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* --- le prix de l option ne doit pas coller au texte --- */
cart-drawer .dl-prot-p,
.drawer--cart .dl-prot-p {
  margin-left: 12px !important;
  white-space: nowrap;
}

/* ===== LOT 26 — une seule epaisseur de trait pour tous les pictogrammes ===== */

/* 🚨 stroke-width vit dans l echelle du viewBox : « 1 » donne 0,67 px a 16 px
   d affichage et 1,33 px a 32 px. Les pictogrammes du site allaient de 0,67 a
   1,50 px de trait apparent — du simple au double.
   « non-scaling-stroke » exprime le trait en PIXELS D ECRAN : une seule valeur
   couvre alors toutes les tailles. 1,25 px est le milieu de ce qui existait. */

/* cas 1 : le trait est pose sur les traces */
svg path[stroke]:not([stroke="none"]),
svg circle[stroke]:not([stroke="none"]),
svg rect[stroke]:not([stroke="none"]),
svg line[stroke]:not([stroke="none"]),
svg polyline[stroke]:not([stroke="none"]),
svg polygon[stroke]:not([stroke="none"]),
svg ellipse[stroke]:not([stroke="none"]) {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.25px;
}

/* cas 2 : le trait est pose sur la balise <svg> et herite (c est le cas du
   « + » de la FAQ et de mes pictogrammes de reassurance).
   stroke-width S HERITE en SVG : le poser sur le <svg> suffit.
   vector-effect ne s herite PAS : il faut le poser sur les traces. */
svg[stroke]:not([stroke="none"]) {
  stroke-width: 1.25px;
}
svg[stroke]:not([stroke="none"]) * {
  vector-effect: non-scaling-stroke;
}

/* 🚨 Les logos des moyens de paiement sont des marques deposees : on ne touche
   ni a leur trait ni a leur dessin. « !important » et pas une surenchere de
   specificite — la regle principale pese (0,2,2), une exclusion ordinaire
   perdrait. Shopify les rend tous avec aria-labelledby="pi-…". */
svg[aria-labelledby^="pi-"],
svg[aria-labelledby^="pi-"] * {
  vector-effect: none !important;
  stroke-width: revert !important;
}

/* ===== LOT 32 — un element solitaire n est pas un controle ===== */

/* --- l onglet seul de la page de recherche ---
   « :not(:has(> [role="tab"] ~ [role="tab"])) » = la liste ne contient pas
   deux onglets freres, donc il n y en a qu un. Meme motif que celui deja
   employe plus haut pour la liste de l accueil, etendu a la recherche. */
.collection__resource-tab-list:not(:has(> [role="tab"] ~ [role="tab"])) [role="tab"],
.collection__resource-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;
}
.collection__resource-tab-list:not(:has(> [role="tab"] ~ [role="tab"])) [role="tab"],
.collection__resource-tab-list:not(:has(> [role="tab"] ~ [role="tab"])) [role="tab"] *,
.collection__resource-tab-list:not(:has(> [role="tab"] ~ [role="tab"])) [role="tab"][aria-selected="true"],
.collection__resource-tab-list:not(:has(> [role="tab"] ~ [role="tab"])) [role="tab"][aria-selected="true"] * {
  color: #6B6B6B !important;
  -webkit-text-fill-color: #6B6B6B !important;
}

/* --- la pastille de couleur solitaire sur une carte produit ---
   Un seul coloris = aucun choix a faire. Meme raisonnement que le lot 12, qui
   masque les options a valeur unique sur la fiche produit.
   🚨 J avais d abord ecrit « :not(:has(> :nth-child(2))) », en croyant compter
      les pastilles. Faux : .product-card__swatch-list n a qu UN enfant direct,
      un <fieldset> qui contient tout. La condition etait donc toujours vraie et
      la regle masquait TOUTES les listes, y compris celles a trois couleurs.
      On compte les pastilles elles-memes : « pas deux .color-swatch freres ». */
.product-card__swatch-list:not(:has(.color-swatch ~ .color-swatch)) {
  display: none !important;
}


/* ===== LOT 33 — les boutons des cartes alignes sur une ligne ===== */

/* La carte est un flex en colonne : on pousse le bloc du bouton tout en bas.
   Les cartes d une meme rangee ayant la meme hauteur, les boutons tombent
   alors sur la meme ligne — qu il y ait une rangee de pastilles ou non, et
   que le titre tienne sur une ou deux lignes. */
product-card, .product-card { display: flex !important; flex-direction: column !important; }
.product-card__quick-buy { margin-top: auto !important; }


/* ===== LOT 34 — visuels des cartes a taille apparente egale ===== */

/* 🚨 Ne PAS juger l uniformite sur la taille des CADRES : ils faisaient deja
   tous 191x191. Ce qui differe, c est la taille apparente du VETEMENT, et elle
   depend du rapport de la source (0,75 a 1,00 ici) combine a « contain ». */
.product-card__figure img,
product-card .product-card__figure img {
  object-fit: cover !important;
  object-position: center 45% !important;
  width: 100% !important;
  height: 100% !important;
}

/* ===== LOT 35 — la pastille best-seller de la fiche produit ===== */

/* Angles droits et couleurs de la charte, comme le reste de la boutique. */
[class^="unique-verified-purchase"],
[class*=" unique-verified-purchase"] {
  background: #FFFFFF !important;
  border: 1px solid #D2D2D2 !important;
  border-radius: 0 !important;
  padding: 5px 10px !important;
}
[class^="unique-verified-purchase"],
[class^="unique-verified-purchase"] *,
[class*=" unique-verified-purchase"],
[class*=" unique-verified-purchase"] * {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  font-weight: 700 !important;
}

/* 🚨 On ne peut pas reecrire le trace d un SVG depuis une feuille de style.
   On masque donc la flamme de l application et on pose le sceau de l accueil
   en image de fond sur un ::before : c est la seule facon de changer un
   dessin dont on ne possede pas le balisage. */
[class^="unique-verified-purchase"] > svg,
[class*=" unique-verified-purchase"] > svg {
  display: none !important;
}
[class^="unique-verified-purchase"]::before,
[class*=" unique-verified-purchase"]::before {
  /* 🚨 !important sur content : sans lui la regle de l application gagnait
     et le pseudo-element n etait pas genere du tout. */
  content: '' !important;
  display: inline-block !important;
  width: 14px !important; height: 14px !important;
  flex-shrink: 0;
  margin-right: 6px !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203.1Q14.8%201.57%2016.45%204.29Q19.64%204.36%2019.71%207.55Q22.43%209.2%2020.9%2012Q22.43%2014.8%2019.71%2016.45Q19.64%2019.64%2016.45%2019.71Q14.8%2022.43%2012%2020.9Q9.2%2022.43%207.55%2019.71Q4.36%2019.64%204.29%2016.45Q1.57%2014.8%203.1%2012Q1.57%209.2%204.29%207.55Q4.36%204.36%207.55%204.29Q9.2%201.57%2012%203.1Z%22%20fill%3D%22%230A0A0A%22%2F%3E%3Cpath%20d%3D%22M8.3%2012.2l2.6%202.6%205-5.2%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.1%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* ===== LOT 36 — emplacements d avatar sans image ===== */

/* Un emplacement qui ne contient qu un <svg> est un pictogramme « image
   absente » : la section le rend elle-meme quand le reglage est vide.
   Une vraie photo serait un <img>, donc la regle la laisse passer. */
[class*="proof-image-"]:has(> svg) {
  display: none !important;
}
/* si aucun des trois emplacements n a de photo, la rangee entiere s efface
   et le texte de preuve sociale prend toute la largeur */
[class*="proof-images-"]:not(:has(img)) {
  display: none !important;
}


/* ===== LOT 40 — plus de zoom iOS au focus des champs ===== */

/* 🚨 Safari iPhone zoome des qu un champ touche fait moins de 16 px. C est la
   seule valeur qui l en empeche : « user-scalable=no » est ignore depuis
   iOS 10 et nuit a l accessibilite.
   Uniquement sous 750 px : sur grand ecran le focus ne zoome pas. */
@media (max-width: 749px) {
  input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
  textarea,
  select,
  .input,
  .textarea,
  .quantity-selector__input,
  .search-drawer__input,
  .psg-upsell__size {
    font-size: 16px !important;
  }
}


/* ===== LOT 54 — respiration des intertitres de la fiche produit ===== */

/* Mesure avant : margin-top 0, margin-bottom 0, ecart reel de 0 px avec le
   paragraphe precedent — les trois sections formaient un seul pave. */
.rte.dl-desc h4 {
  margin-top: 22px !important;
  margin-bottom: 5px !important;
  /* -0.05em de tracking global convient a du gros Anton, pas a une etiquette
     de 11 px en capitales : on ouvre. */
  letter-spacing: .08em !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}
/* un titre appartient a ce qui le suit : pas de marge haute s il ouvre le bloc */
.rte.dl-desc h4:first-child {
  margin-top: 0 !important;
}
/* les paragraphes n avaient aucune marge basse non plus */
.rte.dl-desc p {
  margin-bottom: 0 !important;
}


/* ===== LOT 59 — la grammaire des boutons de l accueil ===== */

/* 🚨 Le relief ne vient pas d un rayon ni d une grosse ombre — ca fait bouton
   de jeu. Il vient de quatre choses fines : un degrade de surface, un lisere
   clair d 1 px en haut (l arete eclairee), un lisere sombre en bas (l ombre
   propre), une ombre portee large qui decolle du fond. Et d un enfoncement de
   1 px a l appui, qui fait toute la difference entre l image d un bouton et un
   bouton. Ne pas augmenter ces valeurs : c est leur finesse qui tient. */

/* ---------- PRINCIPAL : l action qu on veut voir prise ---------- */
.wc-vedette__cta,
.wc-penderie__cta,
.wc-qa__cta {
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 54%, #E8E8E8 100%) !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(0,0,0,.16) inset,
    0 10px 26px rgba(0,0,0,.55),
    0 2px 6px rgba(0,0,0,.42) !important;
  transition:
    transform .12s cubic-bezier(.22,.61,.36,1),
    box-shadow .2s ease,
    background .2s ease !important;
}
.wc-vedette__cta:hover,
.wc-penderie__cta:hover,
.wc-qa__cta:hover:not([disabled]) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 54%, #F1F1F1 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -1px 0 rgba(0,0,0,.16) inset,
    0 15px 36px rgba(0,0,0,.62),
    0 3px 8px rgba(0,0,0,.45) !important;
}
/* l enfoncement : 1 px, jamais plus. Au-dela, ca fait jouet. */
.wc-vedette__cta:active,
.wc-penderie__cta:active,
.wc-qa__cta:active:not([disabled]) {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 4px 12px rgba(0,0,0,.5) !important;
}

/* ---------- SECONDAIRE : les choix, sur fond sombre ---------- */
.wc-penderie__ajout,
.wc-qa__valeur,
.wc-qa__x {
  background: linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 100%) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  border-radius: 0 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 6px 16px rgba(0,0,0,.38) !important;
  transition:
    transform .12s cubic-bezier(.22,.61,.36,1),
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease !important;
}
.wc-penderie__ajout:hover,
.wc-qa__valeur:not([data-epuise="1"]):hover,
.wc-qa__x:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.08) 100%) !important;
  border-color: rgba(255,255,255,.62) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 9px 22px rgba(0,0,0,.46) !important;
}
.wc-penderie__ajout:active,
.wc-qa__valeur:not([data-epuise="1"]):active,
.wc-qa__x:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 3px 9px rgba(0,0,0,.42) !important;
}

/* la valeur retenue prend la grammaire du principal : elle EST une decision */
.wc-qa__valeur[aria-pressed="true"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 100%) !important;
  border-color: #FFFFFF !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(0,0,0,.14) inset,
    0 6px 16px rgba(0,0,0,.4) !important;
}
/* une taille epuisee ne doit RIEN promettre : ni relief, ni reaction */
.wc-qa__valeur[data-epuise="1"] {
  background: transparent !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* 🚨 Personne ne doit voir un bouton s enfoncer tout seul : on coupe les
   transformations pour qui a demande moins d animation. */
@media (prefers-reduced-motion: reduce) {
  .wc-vedette__cta, .wc-penderie__cta, .wc-qa__cta,
  .wc-penderie__ajout, .wc-qa__valeur, .wc-qa__x {
    transition: none !important;
  }
  .wc-vedette__cta:active, .wc-penderie__cta:active, .wc-qa__cta:active,
  .wc-penderie__ajout:active, .wc-qa__valeur:active, .wc-qa__x:active {
    transform: none !important;
  }
}

/* ===== LOT 63 — LE bouton WINTER CLUB ===== */

/* ========== LE SOCLE ==========
   Le biseau vit sur un ::before, pas sur le bouton. Deux raisons :
   le texte reste DROIT (un pave incline a texte penche fait accident), et la
   boite ne s elargit pas, donc plus de debordement a droite.
   🚨 Ne pas remettre « transform: skewX() » sur le bouton lui-meme. */
.wc-vedette__cta,
.wc-penderie__cta,
.wc-qa__cta,
.wc-penderie__ajout {
  position: relative !important;
  isolation: isolate;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}
.wc-vedette__cta::before,
.wc-penderie__cta::before,
.wc-qa__cta::before,
.wc-penderie__ajout::before {
  content: '';
  position: absolute;
  /* 7 px de marge laterale : le biseau se developpe LA-DEDANS au lieu de
     pousser le bouton hors de son conteneur. */
  inset: 0 7px;
  z-index: -1;
  transform: skewX(-9deg);
  transition: transform .12s cubic-bezier(.22,.61,.36,1), box-shadow .12s ease;
}
/* l appui : le pave glisse DANS son ombre, il ne s ecrase pas */
.wc-vedette__cta:active::before,
.wc-penderie__cta:active::before,
.wc-qa__cta:active:not([disabled])::before,
.wc-penderie__ajout:active::before {
  transform: skewX(-9deg) translate(3px, 3px);
}

/* ========== SUR FOND SOMBRE : face claire, second plan gris ==========
   🚨 Le second plan DOIT trancher avec la face. Avant, l ombre dure etait de
   la meme couleur que le bouton : on ne voyait qu une masse. #2E2E2E se
   detache du fond (#0A0A0A) sans faire tache. */
.wc-vedette__cta,
.wc-penderie__cta,
.wc-qa__cta {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}
.wc-vedette__cta::before,
.wc-penderie__cta::before,
.wc-qa__cta::before {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 58%, #E6E6E6 100%);
  /* 🚨 #3A3A3A et non #2E2E2E : sur un fond a #0A0A0A, un gris trop sombre ne
     se detache pas et le second plan disparait — c est exactement ce que
     Farouk voyait. Il faut que l ombre SE VOIE, c est elle qui raconte le
     relief. */
  box-shadow: 7px 7px 0 0 #3A3A3A;
}
.wc-vedette__cta:hover::before,
.wc-penderie__cta:hover::before,
.wc-qa__cta:hover:not([disabled])::before {
  background: #FFFFFF;
  box-shadow: 9px 9px 0 0 #4A4A4A;
}
.wc-vedette__cta:active::before,
.wc-penderie__cta:active::before,
.wc-qa__cta:active:not([disabled])::before {
  box-shadow: 3px 3px 0 0 #3A3A3A;
}

/* ========== SECONDAIRE SUR SOMBRE : contour, meme geste ========== */
.wc-penderie__ajout {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.wc-penderie__ajout::before {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.34);
  /* 🚨 5 px en #454545 : l ancienne valeur, du blanc a 14 %, donnait un gris
     a peine plus clair que le fond — on ne voyait aucune ombre. */
  box-shadow: 5px 5px 0 0 #454545;
}
.wc-penderie__ajout:hover {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}
.wc-penderie__ajout:hover::before {
  background: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: 7px 7px 0 0 #5A5A5A;
}
.wc-penderie__ajout:active::before { box-shadow: 2px 2px 0 0 #454545; }

/* 🚨 La fiche produit et les cartes ne sont PAS traitees ici : le theme a
   deja son bouton biseaute dans layout/theme.liquid, avec contre-biseau du
   libelle sur <button-content>. Le doublonner ici faisait sortir un morceau
   noir a cote du bouton. Ce bloc ne vise QUE les boutons de l accueil et de
   la feuille d ajout, qui n ont pas de <button-content> a contre-biseauter. */

/* 🚨 Rien ne doit bouger pour qui a demande moins d animation. */
@media (prefers-reduced-motion: reduce) {
  .wc-vedette__cta::before, .wc-penderie__cta::before, .wc-qa__cta::before,
  .wc-penderie__ajout::before { transition: none; }
  .wc-vedette__cta:active::before, .wc-penderie__cta:active::before,
  .wc-qa__cta:active::before,
  .wc-penderie__ajout:active::before { transform: skewX(-9deg); }
}

/* 🚨 Le bloc « LOT 65 — le champ quantite » a ete ANNULE le 26/09.
   Son selecteur « [class*="quantity"] » etait trop large : il attrapait un
   conteneur de la ligne d article et non le champ, ce qui etalait la
   quantite sur toute la largeur du tiroir, decalait la vignette et faisait
   disparaitre la corbeille. Un defaut de centrage de 18 px remplace par une
   ligne cassee : mauvais echange.
   A refaire en visant le champ par son VRAI selecteur, releve avec un article
   dans le panier. */

/* ===== LOT 71 — les titres attrapent la lumiere ===== */
/* 🚨 REECRIT AU LOT 82 — l effet vient de sneakaddict.fr, releve sur place.
   Historique : lot 71 = halo qui s allume (refuse), lot 78 = reflet en
   pseudo-element (refuse), lot 82 = le balayage de SNEAKADDICT, a l identique.
   Ne pas en inventer un quatrieme : celui-ci est celui que Farouk a valide
   ailleurs. */

/* Les deux seules couleurs a toucher. Chez SNEAKADDICT l accent est le lime
   #ADFF00 ; ici c est un bleu glace, parce qu une marque neige et noir ne
   porte pas de vert. Remettre le vert = changer cette seule ligne. */
:root {
  /* 🚨 Plus de bleu : WINTER CLUB n a PAS de couleur d accent, elle est
     noire et blanche. Chez SNEAKADDICT le lime est la couleur de la marque,
     ici il n y a rien d equivalent — une teinte inventee sort de nulle part.
     On garde donc un reflet de METAL : base argent, eclat blanc pur.
     Contraste de la base sur le fond noir : 12:1. */
  --wc-balai-base:   #C9CFD6;
  --wc-balai-eclat:  #FFFFFF;
  --wc-balai-duree:  5s;
}

@keyframes saBalayage2 {
  0%   { background-position:  200% center; }
  100% { background-position: -200% center; }
}

.wc-vedette__titre,
.wc-penderie__titre,
.sa-tp__h,
.dl-faqf__h,
[id*="__sa_qualite"] .h2,
[id*="__newsletter"] .h2 {
  /* la bande coloree ne fait que 14 % de la largeur du degrade : c est ce qui
     en fait un REFLET qui passe, et non un titre colore en permanence. */
  background-image: linear-gradient(110deg,
    var(--wc-balai-base)  43%,
    var(--wc-balai-eclat) 50%,
    var(--wc-balai-base)  57%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: var(--wc-balai-duree) linear infinite saBalayage2;
  /* 🚨 EN PAUSE PAR DEFAUT. Animer « background-clip: text » oblige le
     navigateur a redecouper le texte a chaque image. Sur sept titres joues en
     continu, meme hors ecran, la page tombait a 18 images/s AU REPOS.
     Un script remet « running » sur les seuls titres visibles. Sans ce script
     (JavaScript coupe), les titres restent parfaitement lisibles : ils sont
     simplement fixes, ce qui est le bon repli. */
  animation-play-state: paused;
  /* 🚨 indispensable : sans cette respiration, le degrade est coupe au ras du
     texte et la derniere lettre perd sa couleur. La marge negative annule le
     decalage que le padding provoquerait. */
  padding-inline: .05em .26em;
  margin-inline: -.05em -.26em;
}

/* Sur fond clair le texte est noir : la base suit, l accent fonce pour rester
   lisible. Meme mecanique, contraste inverse. */
.color-scheme--scheme-1 .sa-tp__h,
.color-scheme--scheme-4 .sa-tp__h,
.color-scheme--scheme-5 .sa-tp__h {
  /* sur fond clair, l eclat doit etre PLUS CLAIR que la base sans devenir
     illisible : un gris d acier, pas du bleu. */
  background-image: linear-gradient(110deg, #0A0A0A 43%, #6B7480 50%, #0A0A0A 57%);
}

/* 🚨 L ombre de chaque pastille du carrousel est posee ICI et non dans la
   section : le selecteur « .wc-vedette__point span » y apparait QUATRE fois
   (etats normal, courant, survol, focus) et je ne vais pas deviner laquelle
   viser. Depuis la feuille liee, une seule regle couvre les quatre. */
.wc-vedette__point span {
  box-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.35);
}

@media (prefers-reduced-motion: reduce) {
.wc-vedette__titre,
.wc-penderie__titre,
.sa-tp__h,
.dl-faqf__h,
[id*="__sa_qualite"] .h2,
[id*="__newsletter"] .h2 {
    /* la matiere reste, le mouvement part : la bande se fige au milieu */
    animation: none;
    background-position: 50% center;
  }
}

/* ===== LOT 74 — icones du tiroir et centrage de la quantite ===== */

/* ---------- les icones ----------
   🚨 On pose « color » et pas « fill: none » : le tiroir melange des icones au
   TRAIT (le camion, le cadenas) et des icones PLEINES (la corbeille).
   Ecraser le fill casserait les secondes. currentColor suffit aux premieres. */
cart-drawer.drawer--cart svg,
cart-drawer.drawer--cart svg * {
  color: #FFFFFF !important;
}
/* celles qui portent un trait ecrit en dur */
cart-drawer.drawer--cart .dl-rc-live svg,
cart-drawer.drawer--cart .dl-rc-live svg *,
cart-drawer.drawer--cart .quantity-selector__button svg,
cart-drawer.drawer--cart .quantity-selector__button svg *,
cart-drawer.drawer--cart .line-item__quantity-selector svg,
cart-drawer.drawer--cart .line-item__quantity-selector svg * {
  stroke: currentColor !important;
}
/* et celles dont le remplissage est ecrit en noir */
cart-drawer.drawer--cart svg[fill="#000"],
cart-drawer.drawer--cart svg[fill="#000000"],
cart-drawer.drawer--cart svg[fill="black"],
cart-drawer.drawer--cart svg[fill="#0A0A0A"],
cart-drawer.drawer--cart svg[fill="#0a0a0a"],
cart-drawer.drawer--cart path[fill="#000"],
cart-drawer.drawer--cart path[fill="#000000"],
cart-drawer.drawer--cart path[fill="black"],
cart-drawer.drawer--cart path[fill="#0A0A0A"],
cart-drawer.drawer--cart path[fill="#0a0a0a"] {
  fill: #FFFFFF !important;
}
/* les − et + sont des <a> : ils doivent rester des cibles de 44 px */
cart-drawer.drawer--cart .quantity-selector__button {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
}

/* ---------- le centrage de la quantite ----------
   La commande fait 112 px dans un conteneur de 148, callee a gauche : 18 px
   de decalage. On centre le CONTENEUR et on ne touche pas a sa grille. */
cart-drawer.drawer--cart .line-item__quantity-selector {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
/* 🚨 16 px minimum : en dessous, Safari iPhone zoome des qu on touche le champ. */
cart-drawer.drawer--cart .quantity-selector__input {
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: transparent !important;
}


/* ===== LOT 76 — le parallelogramme du tiroir ===== */

/* ---------- le bouton principal ----------
   Meme systeme que la fiche produit, seule l ombre change de valeur : la face
   est blanche sur fond noir ici, alors qu elle est noire sur fond blanc la-bas. */
cart-drawer.drawer--cart button.button[name="checkout"],
cart-drawer.drawer--cart .cart-drawer__footer-inner button.button:not(.button--outline) {
  --sa-ombre: #6B6B6B;
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: skewX(-12deg);
  box-shadow: 6px 6px 0 var(--sa-ombre) !important;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
  /* 🚨 le cisaillement fait deborder la boite de ~5,5 px de chaque cote sur
     52 px de haut, et l ombre ajoute 6 px a droite : sans ces marges le bouton
     touche les bords du tiroir. */
  margin-inline: 6px 13px;
}
cart-drawer.drawer--cart button.button[name="checkout"] button-content,
cart-drawer.drawer--cart .cart-drawer__footer-inner button.button:not(.button--outline) button-content {
  display: inline-block;
  transform: skewX(12deg);
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  font-weight: 800 !important;
  letter-spacing: .05em;
}
cart-drawer.drawer--cart button.button[name="checkout"]:active,
cart-drawer.drawer--cart button.button[name="checkout"]:hover {
  /* on enfonce : l ombre se resserre et la face avance du meme nombre de px */
  box-shadow: 2px 2px 0 var(--sa-ombre) !important;
  transform: skewX(-12deg) translate(4px, 4px);
}

/* ---------- les deux boutons secondaires ----------
   Pas de <button-content> chez eux : impossible de contre-cisailler le texte.
   On coupe la boite au clip-path (le texte reste droit) et l ombre passe par
   drop-shadow, qui suit la decoupe — box-shadow serait coupee avec elle.
   7 px de biais sur ~30 px de haut, c est le meme angle que les 12 degres. */
/* (bloc du lot 76 retire : drop-shadow sur fond transparent ombrait le texte) */

/* ---------- la protection d expedition ----------
   Elle est desormais fonctionnelle (lot 75) : elle merite d etre lisible.
   Le libelle etait a #333 et le prix en vert clair, tous deux herites d un
   theme clair. */
cart-drawer.drawer--cart .dl-prot-t b {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
cart-drawer.drawer--cart .dl-prot-t em {
  color: rgba(255,255,255,.62) !important; -webkit-text-fill-color: rgba(255,255,255,.62) !important;
}
cart-drawer.drawer--cart .dl-prot-p {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
cart-drawer.drawer--cart .dl-prot-shield { color: rgba(255,255,255,.75) !important; }
cart-drawer.drawer--cart .dl-prot-btn.is-on .dl-prot-shield { color: #FFFFFF !important; }


/* ===== LOT 77 — les deux boutons secondaires du tiroir ===== */

/* 🚨 CORRECTION DU LOT 76. « filter: drop-shadow » ombre la silhouette ALPHA :
   sur un bouton a fond transparent il ombrait le TEXTE, pas la boite, et
   « CHOISIR » apparaissait ecrit deux fois. Une face pleine resout le
   probleme et donne en prime la meme silhouette qu au bouton principal. */
cart-drawer.drawer--cart .psg-gl__pick,
cart-drawer.drawer--cart button.link.subheading-xs {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
  letter-spacing: .05em;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%) !important;
  filter: drop-shadow(4px 4px 0 rgba(255,255,255,.26));
  padding: 9px 22px !important;
  transition: filter .2s ease, transform .2s ease;
}
cart-drawer.drawer--cart .psg-gl__pick:active,
cart-drawer.drawer--cart button.link.subheading-xs:active {
  filter: drop-shadow(1px 1px 0 rgba(255,255,255,.26));
  transform: translate(3px, 3px);
}
/* la bordure du parent ne doit pas redessiner un rectangle autour de la coupe */
cart-drawer.drawer--cart .psg-gl__pick::before,
cart-drawer.drawer--cart .psg-gl__pick::after,
cart-drawer.drawer--cart button.link.subheading-xs::before,
cart-drawer.drawer--cart button.link.subheading-xs::after {
  display: none !important;
}


/* ===== LOT 99 — le logo centre entre les icones ===== */
@media screen and (max-width: 749px) {
  /* 🚨 « auto 1fr auto » et non trois colonnes fixes. Avec des colonnes
     egales, le logo est centre dans la PAGE — ce qui est mathematiquement
     juste et visuellement faux : le groupe de gauche (hamburger + loupe,
     93 px) remplit sa colonne, celui de droite (panier, 50 px) non. Il
     restait 20 px d air a gauche du logo contre 63 a droite.
     Ici, chaque colonne laterale se reduit a son contenu et le logo, centre
     dans ce qui reste, tombe a egale distance des deux groupes. */
  x-header.header {
    grid-template-columns: auto 1fr auto !important;
  }
  x-header.header .header__logo {
    justify-self: center !important;
  }
}


/* ===== LOT 100 — pas de saut de cadrage ===== */
/* 🚨 On masque la RANGEE, pas chaque piece. Le calage est asynchrone : masquer
   piece par piece les fait apparaitre les unes apres les autres pendant que
   les voisines bougent encore, et c est ce decalage que l oeil lit comme un
   desalignement. Ici tout apparait ensemble, deja cale.
   Deux filets : « wc-pret » est pose au plus tard a 1,4 s, et le repli sans
   JavaScript affiche tout immediatement. Ne jamais masquer sans porte de
   sortie. */
.wc-penderie__rail,
.wc-penderie__barre {
  opacity: 0;
  transition: opacity .3s ease;
}
.wc-penderie.wc-pret .wc-penderie__rail,
.wc-penderie.wc-pret .wc-penderie__barre {
  opacity: 1;
}
.no-js .wc-penderie__rail,
.no-js .wc-penderie__barre { opacity: 1; }


/* ===== LOT 103 — le logo aligne avec les icones ===== */
/* 🚨 LA CAUSE : deux translateY empiles, pas un probleme d alignement.
     .header__logo        translateY( 10px)
     .header__logo-image  translateY(-18px)   -> total -8 px
   Soit exactement l ecart mesure entre le centre du logo (133) et celui des
   icones (141). Le logo etant centre dans son propre fichier (marges 7/7 sur
   les quatre cotes), ces decalages etaient des rustines. On les retire.
   🚨 Selecteurs lourds (« x-header.header h1.header__logo ») parce que le
   translateY vient d un <style> EN LIGNE : a specificite egale il gagnerait,
   un <style> du body passant apres la feuille du head. */
x-header.header h1.header__logo,
x-header.header .header__logo {
  transform: none !important;
  align-self: center !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding-block: 0 !important;
  display: flex !important;
  align-items: center !important;
}
x-header.header h1.header__logo > a,
x-header.header h1.header__logo img,
x-header.header img.header__logo-image {
  transform: none !important;
  align-self: center !important;
  margin-block: 0 !important;
}