/** Shopify CDN: Minification failed

Line 472:0 Expected "}" to go with "{"

**/
/* ============================================================================
   REFONTE-PLUS — lot « moins cheap » (05/09, nuit). Additif, charge apres
   refonte.css (head) et rejoue apres collection.css (body) sur la collection.
   Charte inchangee : blanc, encre, bleu roi, pilules. On enleve ce qui fait
   cheap : bordures de cartes, chips sur deux lignes, sidebar de filtres vide,
   titres en capitales.
   ========================================================================= */

/* --- Carte produit nue : zero bordure, zero ombre, coins 12px ------------- */
.product-card { position: relative; display: flex; flex-direction: column; border-radius: 12px; }
.product-card__media {
  position: relative; display: block; overflow: hidden;
  border-radius: 12px !important; border: 0 !important;
  background: #f4f5f7 !important;   /* squelette pendant le chargement */
}
.product-card__media.is-loaded { background: #fff !important; }  /* nue : l'image se fond dans la page */
.product-card__media img { padding: 0; }
.product-card:hover .product-card__media img { transform: none; }
.product-card__img--dos { position: absolute; inset: 0; opacity: 0 !important; }
@media (hover: hover) {
  .product-card:hover .product-card__img--dos { opacity: 1 !important; }
  .product-card:hover .product-card__media:has(.product-card__img--dos) .product-card__img--face { opacity: 0 !important; }
}
.product-card .price-badge { display: none !important; }

.product-card__info { padding: 10px 4px 0; }
.product-card__title { margin: 0 0 4px; }
.product-card__title a { color: inherit; text-decoration: none; text-transform: none; font-weight: 600; font-size: 0.875rem; line-height: 1.3; }
.product-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.product-card__saison { color: var(--c-gris, #6b7280); font-weight: 500; }

/* « + » d'ajout rapide, pastille blanche, coin bas droit de l'image */
.product-card__quick {
  position: absolute; right: 10px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px; border: 0; padding: 0;
  background: #fff; color: var(--c-craie, #12151a);
  box-shadow: 0 2px 10px rgba(10, 15, 26, 0.12);
  cursor: pointer; transition: transform .2s ease, background-color .2s ease;
}
.product-card__quick:hover { background: var(--c-accent, #0f2f5c); color: #fff; transform: scale(1.06); }
.product-card.is-quick .product-card__quick { display: none; }
/* on positionne le + par rapport a l'image : le media est le 1er enfant,
   la pastille est absolue dans .product-card ; on la remonte de la hauteur du bloc info */
.product-card__visuel { position: relative; }
.product-card__quick { bottom: 10px; }

.product-card__tailles {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 0 0; padding: 10px 10px;
  border-radius: 0 0 12px 12px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.product-card__tailles[hidden] { display: none; }
.product-card__tailles-label { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--c-gris, #6b7280); white-space: nowrap; }
.product-card__tailles-liste { display: flex; flex: 1 1 auto; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.product-card__tailles-liste::-webkit-scrollbar { display: none; }
.product-card__taille {
  flex: 0 0 auto; min-width: 38px; height: 36px; padding: 0 10px;
  border: 1px solid var(--c-ligne, #e5e5e5); border-radius: 999px; background: #fff;
  font: 600 12px/1 var(--f-body, inherit); color: var(--c-craie, #12151a); cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.product-card__taille:hover { border-color: var(--c-accent, #0f2f5c); background: var(--c-accent, #0f2f5c); color: #fff; }
.product-card__taille.is-off { color: #b3b3b3; text-decoration: line-through; cursor: default; }
.product-card__taille.is-off:hover { background: #fff; color: #b3b3b3; border-color: var(--c-ligne, #e5e5e5); }
.product-card.is-adding .product-card__taille { opacity: .4; pointer-events: none; }
.product-card.is-added .product-card__tailles::after {
  content: "Ajouté au panier"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 0 0 12px 12px; background: var(--c-accent, #0f2f5c); color: #fff; font-size: 12px; font-weight: 700;
}
.product-card__tailles-fermer { flex: 0 0 auto; width: 28px; height: 28px; border: 0; background: none; color: var(--c-gris, #6b7280); cursor: pointer; }

/* --- Chips de collection : UNE ligne, jamais deux ------------------------ */
.chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
.chips__tile, .chips__chip { flex: 0 0 auto; scroll-snap-align: start; }

/* --- Filtres : plus de sidebar (vide sur 90 % des collections), un tiroir --- */
.rp-filtres-on .collection__filters { display: none !important; }
.rp-filtres-on .collection__toolbar { display: flex !important; }   /* on garde compteur + tri + vue */
.rp-filtres-on .collection__body--with-filters { display: block !important; grid-template-columns: none !important; }
.rp-filtres-on .collection { padding-bottom: 52px; }

/* Le tiroir vient de la charte Represent : on le remet aux couleurs d'ici. */
.rpfb { background: #fff; } /* 23/09 : bouton blanc flottant (voir rp-filtres.css §1) */
.rpfd__panneau { font-family: var(--f-body, inherit); }
.rpfd__voir { background: var(--c-accent, #0f2f5c) !important; border-radius: 999px !important; }

/* Titres produits en casse de titre sur le rail et la grille (plus de capitales). */
.product-card__title { text-transform: none !important; }

/* Le bouton « Filtre » de la barre d outils reste visible en desktop : il ouvre le tiroir. */
.rp-filtres-on .collection__filter-btn { display: inline-flex !important; }

/* Mobile : 2 colonnes, la rangee rapide montre 3 tailles au lieu de 2. */
@media (max-width: 749px) { .product-card__tailles { padding: 8px; gap: 6px; } .product-card__tailles-label { display: none; } .product-card__taille { min-width: 34px; padding: 0 8px; height: 34px; } }

/* Tailles avec âge (kits, bodies, survêtements enfant, 22/09 Clarity Q17) : « S » et « 4-6 ans »
   dessous, en grille de 3 (5 tailles + la croix = 2 rangs) : tout se voit sans faire defiler. */
.product-card__tailles--ages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 6px; }
.product-card__tailles--ages .product-card__tailles-label { display: none; }
.product-card__tailles--ages .product-card__tailles-liste { display: contents; }
.product-card__tailles--ages .product-card__taille {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; width: 100%; height: 40px; padding: 0 2px; border-radius: 10px; font-size: 13px;
}
.product-card__taille-age { display: block; font-size: 9px; font-weight: 500; letter-spacing: -0.01em; color: var(--c-gris, #6b7280); white-space: nowrap; }
.product-card__taille:hover .product-card__taille-age { color: inherit; }
.product-card__taille.is-off .product-card__taille-age { color: inherit; }
.product-card__tailles--ages .product-card__tailles-fermer { width: 100%; height: 40px; border-radius: 10px; }
@media (max-width: 370px) { .product-card__tailles--ages .product-card__taille { padding: 0; } .product-card__taille-age { font-size: 8.5px; letter-spacing: -0.02em; } }

/* Bascule face/dos quasi instantanee : le dos est precharge, le fondu ne doit plus se voir. */
.product-card__media img { transition: opacity .1s ease !important; }

/* --- Plus d'orange : l'offre parle en bleu roi, comme le logo (owner 05/09) ---- */
:root { --c-promo: #1d4ed8; }
/* Sur les aplats sombres (bandeau offre PDP, jauge panier) le bleu roi manque de
   contraste : on passe au bleu clair du dégradé du logo. */
.pdp__offer-main strong, .pdp__offer-main svg { color: #7fb0ff !important; }
.pdp__offer { border-left-color: #3b82f6 !important; }
.pack-progress { border-left-color: #3b82f6 !important; }
.pack-progress__cell.is-free.is-on { background: #3b82f6 !important; border-color: #3b82f6 !important; }
.offre__jersey--free { outline-color: #3b82f6 !important; }
.offre__badge, .offre__jersey--free .offre__badge { background: #3b82f6 !important; }
.offre__title em { color: #7fb0ff !important; }
.promo-bar__title strong { color: #7fb0ff !important; }
.pack-progress__count { color: #7fb0ff !important; }
.pack-progress__cell.is-free { border-color: rgba(127, 176, 255, .8) !important; color: #7fb0ff !important; }

/* --- Cartes clubs « affiche » : le PNG contient la carte arrondie, la tete qui
   depasse et le texte ; la tuile n'ajoute rien. Le haut transparent laisse voir
   le fond blanc de la page, c'est ce qui fait « sortir » le joueur. --- */
.col-card--affiche { position: relative; display: block; aspect-ratio: 1800 / 2693; border-radius: 0; overflow: visible; background: none; box-shadow: none; }
.col-card--affiche .col-card__media { position: static; display: block; border-radius: 0; overflow: visible; background: none; }
.col-card--affiche .col-card__media img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 0; transition: transform .35s ease; }
.col-card--affiche:hover .col-card__media img { transform: translateY(-6px) scale(1.01); }
.col-cards__grid:has(.col-card--affiche) { padding-top: 12px; align-items: end; }

/* --- 06/09 : halo LED bleu qui tourne autour du bandeau 3+1 (fiche produit) --- */
.pdp__offer { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px rgba(59,130,246,0.18), 0 0 22px rgba(37,99,235,0.28); animation: pdp-led-glow 3.4s ease-in-out infinite; }
.pdp__offer::before {
  content: ''; position: absolute; z-index: -2; left: 50%; top: 50%; width: 240%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg, transparent 0deg 235deg, rgba(37,99,235,0.18) 270deg, #2563eb 322deg, #60a5fa 344deg, #dbeafe 354deg, #ffffff 358deg, transparent 360deg);
  animation: pdp-led 3.4s linear infinite;
}
.pdp__offer::after { content: ''; position: absolute; z-index: -1; inset: 3px; border-radius: calc(0.9rem - 3px); background: var(--c-craie); box-shadow: inset 0 0 18px rgba(37,99,235,0.22); }
.pdp__offer--done { box-shadow: 0 0 0 1px rgba(0,182,122,0.25), 0 0 22px rgba(0,182,122,0.28); animation: none; }
.pdp__offer--done::before { background: conic-gradient(from 0deg, transparent 0deg 235deg, rgba(0,182,122,0.18) 270deg, #00b67a 322deg, #5eead4 344deg, #ccfbf1 354deg, #ffffff 358deg, transparent 360deg); }
.pdp__offer--done::after { background: #0a7a52; box-shadow: inset 0 0 18px rgba(0,182,122,0.22); }
@keyframes pdp-led { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes pdp-led-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(59,130,246,0.18), 0 0 14px rgba(37,99,235,0.18); } 50% { box-shadow: 0 0 0 1px rgba(59,130,246,0.28), 0 0 28px rgba(37,99,235,0.42); } }
@media (prefers-reduced-motion: reduce) { .pdp__offer, .pdp__offer::before { animation: none; } }

/* --- 06/09 : vignette du tiroir panier = carré collé en haut (la case s'étirait sur toute la hauteur de la ligne → bloc gris sous l'image, owner) --- */
.cart-drawer__line .cart-line__media { align-self: flex-start; aspect-ratio: 1 / 1; display: block; }
.cart-drawer__line .cart-line__media img, .cart-drawer__line .cart-line__media svg { width: 100%; height: 100%; object-fit: contain; display: block; }

/* --- 06/09 : offre 3+1 lisible dans le panier (owner) : pastille OFFERT verte, ligne « 3 × prix + 1 offert », case 4/4 verte --- */
.cart-line__free { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.12rem 0.5rem; border-radius: 999px; background: #00b67a; color: #fff; font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; font-size: 0.62rem; line-height: 1.3; white-space: nowrap; box-shadow: 0 0 0 3px rgba(0,182,122,0.18); animation: cart-free-pop 0.45s cubic-bezier(.2,1.4,.4,1) both; }
.cart-line__free::before { content: '✓'; font-style: normal; }
.cart-line__free--big { font-size: 0.78rem; padding: 0.2rem 0.7rem; }
.cart-line__price { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; }
.cart-line__price s { color: #9aa3b5; font-weight: 400; font-size: 0.8rem; }
.cart-line__price--split .cart-line__split { font-size: 0.72rem; color: #6b7280; font-weight: 500; white-space: nowrap; }
.cart-line__price--split .cart-line__total { font-weight: 700; }
@keyframes cart-free-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pack-progress--done .pack-progress__cell.is-free.is-on { background: #00b67a !important; border-color: #00b67a !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(0,182,122,0.28), 0 0 14px rgba(0,182,122,0.55); animation: cart-free-pop 0.5s cubic-bezier(.2,1.4,.4,1) both; }
.pack-progress--done .pack-progress__cell.is-free.is-on::before { content: '✓ '; }

/* --- 06/09 : flocage nom + numéro OFFERT (owner) : pastille verte, ancien prix barré, 2e ligne du bandeau offre --- */
.perso__free { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: #00b67a; color: #fff; font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 0.62rem; line-height: 1.3; letter-spacing: 0.01em; box-shadow: 0 0 0 3px rgba(0,182,122,0.16); vertical-align: middle; }
.perso__free::before { content: '✓'; font-style: normal; }
.perso__free--sum { margin-left: 0.35rem; font-size: 0.68rem; }
.perso__toggle-price--free { display: inline-flex; align-items: center; gap: 0.4rem; color: #00b67a !important; font-weight: 700; }
.perso__toggle-price--free s { color: #9aa3b5; font-weight: 400; }
.pdp__offer-line2 { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.86rem; color: #e5ebff; font-weight: 500; }
.pdp__offer-line2 svg { width: 0.95rem; height: 0.95rem; color: #7fb0ff; flex: 0 0 auto; }
.pdp__offer-line2 strong { color: #5eead4; text-transform: uppercase; font-family: var(--f-display); font-style: italic; font-weight: 900; letter-spacing: 0.01em; }
.pdp__offer-line2 s { color: #9aa3b5; font-size: 0.78rem; }
.pdp__offer { align-items: stretch; text-align: center; }
.pdp__offer-line2 { justify-content: center; }
.cart-line__prop--free { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; }
.cart-line__prop--free s { color: #9aa3b5; font-size: 0.78rem; }

.pdp__atc-price { display: inline-block; margin-left: 0.55rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.14); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- 06/09 v2 : bloc vert « flocage offert » à part (pas lié au 3+1), étape 3 verte sans switch, options payantes en étape 4 --- */
.pdp__offer-line2 { display: none; }
.pdp__offer { text-align: left; align-items: flex-start; }
.pdp__offer-floc { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6rem; align-items: center; margin: -0.35rem 0 0.9rem; padding: 0.65rem 0.9rem; border-radius: 0.9rem; background: #e6f8f0; border: 1.5px solid #00b67a; color: #0a5a3e; text-decoration: none; }
.pdp__offer-floc svg { width: 1.2rem; height: 1.2rem; color: #00b67a; grid-row: span 2; }
.pdp__offer-floc-main { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -0.01em; font-size: 0.95rem; line-height: 1.1; color: #0a5a3e; }
.pdp__offer-floc-main strong { color: #00b67a; }
.pdp__offer-floc-main s { font-family: var(--f-body); font-style: normal; font-weight: 500; text-transform: none; color: #6b7280; font-size: 0.8rem; margin-left: 0.2rem; }
.pdp__offer-floc-sub { font-size: 0.78rem; color: #0a7a52; font-weight: 500; }
.perso__free-block { margin: 0.75rem 0 0.75rem; padding: 0.85rem 0.9rem 0.9rem; border-radius: 0.9rem; background: #e6f8f0; border: 1.5px solid #00b67a; }
.perso__free-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin: 0; font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -0.01em; font-size: 0.95rem; color: #0a0f1a; }
.perso__free-old { font-family: var(--f-body); font-style: normal; font-weight: 500; text-transform: none; color: #6b7280; font-size: 0.8rem; }
.perso__free-hint { margin: 0.2rem 0 0.6rem; font-size: 0.8rem; color: #0a7a52; font-weight: 500; }
.pdp__step--green { background: #00b67a !important; color: #fff !important; }
.perso__free-block .perso__input { background: #fff; border-color: #b7e9d3; }
.perso__free-block .perso__input:focus { border-color: #00b67a; box-shadow: 0 0 0 3px rgba(0,182,122,0.18); }
.perso__free-block .perso__preview { background: #fff; border: 1px dashed #7fd8b6; border-radius: 0.6rem; padding: 0.5rem; margin: 0.5rem 0; text-align: center; }
.perso__free-block .perso__toggle--sub { margin-top: 0.4rem; }

.perso__free-block { padding: 0; }
.perso__free-sum { list-style: none; cursor: pointer; position: relative; padding: 0.85rem 2.6rem 0.8rem 0.9rem; }
.perso__free-sum::-webkit-details-marker { display: none; }
.perso__free-sum::after { content: '+'; position: absolute; right: 0.9rem; top: 0.6rem; font-family: var(--f-body); font-weight: 500; font-size: 1.5rem; line-height: 1; color: #00b67a; }
.perso__free-block[open] .perso__free-sum::after { content: '−'; }
.perso__free-block > .perso__fields { padding: 0 0.9rem 0.9rem; }
.perso__free-hint { margin-bottom: 0; }

/* --- 06/09 : barre d'achat collante mobile (vignette + nom + prix total + bouton noir) --- */
/* 18/09 (owner) : dans l'appli Facebook la barre touche le bas de l'écran, les coins arrondis de l'iPhone
   rognaient la vignette et le bouton. Sans viewport-fit=cover, env(safe-area-inset-bottom) vaut 0 :
   on garde donc un plancher de 22 px en bas et 16 px sur les côtés. */
.pdp__sticky { gap: 10px; padding: 10px 16px max(22px, calc(10px + env(safe-area-inset-bottom, 0px))); z-index: 60; }
.pdp__sticky-thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: #f3f4f6; display: block; }
.pdp__sticky-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.pdp__sticky-title { font-size: 11px; }
.pdp__sticky-price { font-size: 15px; }
.pdp__sticky-btn { padding: 12px 18px !important; font-size: 14px !important; white-space: nowrap; }
body.has-sticky-atc { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 990px) { body.has-sticky-atc { padding-bottom: 0; } }
/* desktop aussi (Growth Rock : +7,9 % de commandes desktop) : barre fine, contenu centré à la largeur de la page */
@media (min-width: 990px) {
  body .pdp__sticky[data-sticky] { display: flex !important; justify-content: center; padding: 10px 24px; }
  body .pdp__sticky[data-sticky][hidden] { display: none !important; }
  .pdp__sticky-thumb { flex-basis: 48px; width: 48px; height: 48px; }
  body .pdp__sticky[data-sticky] .pdp__sticky-info { flex: 0 1 460px; }
  body .pdp__sticky[data-sticky] { gap: 16px; }
  .pdp__sticky-title { font-size: 13px; }
  .pdp__sticky-price { font-size: 17px; }
  .pdp__sticky-btn { padding: 13px 28px !important; font-size: 15px !important; margin-left: 12px; }
  body.has-sticky-atc { padding-bottom: 76px; }
}

/* Barre collante : prix barré à côté du prix (owner 07/09) */
.pdp__sticky-prices { display: inline-flex; align-items: baseline; gap: 0.35em; flex-wrap: wrap; }
.pdp__sticky-compare { color: var(--c-gris); font-weight: 500; font-size: 0.85em; }
.pdp__sticky-compare[hidden] { display: none; }

/* --- QA 07/09 — BUG 1 : page /cart, prix de ligne hors ecran sur mobile ---
   .cart-line etait `grid-template-columns: 5.5rem 1fr auto` : la colonne du
   milieu a un min-width auto, et son contenu minimum (les 3 boutons de quantite
   2rem + 2rem + le champ 3rem + « Supprimer » sur une seule ligne) mesurait plus
   large que la place disponible. La grille poussait donc la 3e colonne (le prix)
   au-dela du viewport : 454 px de large pour 390 px d'ecran, prix invisible et
   scroll horizontal sur toute la page. Le tiroir n'avait pas le probleme (sa
   vignette est reduite a 4rem et il n'a pas de lien « Supprimer »). */
.cart-line { grid-template-columns: 5.5rem minmax(0, 1fr) auto; }
.cart-line__body { min-width: 0; }
.cart-line__qty { flex-wrap: wrap; row-gap: 0.35rem; }
@media (max-width: 47.99em) {
  /* la ligne quantite tient alors sur une seule ligne, « Supprimer » compris */
  .cart-line__qty { gap: 0.4rem; }
  .cart-line__qty .qty-btn { width: 1.75rem; height: 1.75rem; }
  .cart-line__qty input[type='number'] { width: 2.4rem; padding: 0.25em 0; }
  .cart-line__remove { font-size: 0.78rem; }
}
@media (max-width: 26em) {
  .cart-line { grid-template-columns: 4.25rem minmax(0, 1fr) auto; gap: 0.6rem; }
  .cart-line__media { width: 4.25rem; }
}

/* --- QA 07/09 — BUG 2 : bandeau offre casse en deux colonnes sur mobile ---
   .pdp__offer-main etait un inline-flex : l'icone, le debut de phrase et le
   <strong> etaient TROIS elements flex qui se replient chacun de leur cote.
   Sur la veste Bresil (« Veste achetee = 1 maillot a -50 % ») la phrase est
   trop longue pour 390 px : « Veste achetee = » passait sur deux lignes a
   gauche pendant que « 1 maillot a -50 » / « % » se coupait a droite.
   En bloc, la phrase coule normalement et se coupe entre les mots. */
.pdp__offer-main { display: block; }
.pdp__offer-main svg { display: inline-block; vertical-align: -0.18em; margin-right: 0.4rem; }

/* 07/09 : offre « 3 articles achetés = 1 offert » : 3 cases article + 1 case maillot plus large,
   et la case maillot clignote doucement quand il manque justement le maillot. */
.pack-progress__cells { grid-template-columns: 1fr 1fr 1fr 1.7fr; }
.pack-progress__cell.is-free { white-space: nowrap; font-size: 0.6rem; }
.pack-progress--need-jersey .pack-progress__cell.is-free { border-style: solid; animation: pack-need-jersey 1.2s ease-in-out infinite; }
@keyframes pack-need-jersey { 0%, 100% { box-shadow: 0 0 0 0 rgba(127, 176, 255, 0.55); } 50% { box-shadow: 0 0 0 4px rgba(127, 176, 255, 0); } }

/* 07/09 : ancien prix barré + « Tu économises » dans le tiroir et la page panier (owner). */
.cart-line__compare { color: var(--c-gris, #6b7280); font-weight: 400; font-size: 0.82em; margin-right: 0.15rem; }
.cart-summary__row--savings { color: #0a7a52; font-size: 0.9rem; margin-top: -0.35rem; }
.cart-summary__row--savings .cart-summary__old { color: var(--c-gris, #6b7280); font-weight: 400; font-size: 0.85em; margin-right: 0.3rem; }
.cart-summary__row--savings strong { font-weight: 800; }

/* 07/09 : tiroir panier mobile. Le pied faisait 369 px sur un écran de 664 : les lignes
   produits n'avaient plus de place (0 px visible sous la jauge, owner : « ils sont passés
   où ? »). Pied et jauge compactés, bouton contour et logos masqués (lien texte à la place). */
.cart-drawer__cart-link { display: none; }
@media (max-width: 749px) {
  .cart-drawer__top { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .ship-bar { margin-bottom: 0.5rem; }
  .ship-bar__msg { margin-bottom: 0.3rem; }
  /* La reduction mobile de `.pack-simple` n'est PAS ici : les regles de base de
     cette classe sont plus bas dans le meme fichier, a specificite identique, et
     une media query n'ajoute aucune specificite. Ecrite ici, elle etait perdue
     4 fois sur 4. Elle est posee APRES les regles de base, en fin de fichier. */
  .cart-drawer__foot { padding: 0.7rem 1rem 0.8rem; gap: 0.5rem; }
  .cart-drawer__foot .btn--ghost { display: none; }
  .cart-drawer__foot .pay-logos { display: none; }
  .cart-drawer__cart-link { display: block; text-align: center; font-size: 0.8rem; color: var(--c-gris, #6b7280); text-decoration: underline; text-underline-offset: 2px; margin-top: -0.15rem; }
  /* 17/09 au soir : le bandeau d'avis n'est plus dans le pied, il est descendu
     dans la zone qui defile. On le resserre la ou il se trouve vraiment. */
  .cart-drawer__scroll .tbar { margin: 0.6rem 0 0.5rem; }
  .cart-drawer__delivery { margin: 0; font-size: 0.8rem; }
}

/* ============================================================
   CIBLES TACTILES — 11/09/2026
   Mesures relevees dans ce fichier et dans base.css :
     .cart-line__qty .qty-btn  28px (ligne 245, mobile)
     .drawer-qty .qty-btn      28px (base.css:1616)
     .product-card__taille     34px (ligne 99, mobile)
     .cart-drawer__cart-link   texte 12,8px sans padding (ligne 294)
   Le minimum recommande est 44px.

   On n'agrandit PAS le visuel : les 28px sont voulus, le commentaire ligne 243
   dit que c'est ce qui fait tenir la ligne quantite sur un seul rang. On etend
   seulement la zone tapable avec un ::after invisible.

   Largeur bornee a 100% + 6px : l'ecart entre deux boutons est de 0,4rem
   (6,4px), donc deux zones voisines ne se recouvrent jamais. Un recouvrement
   ferait declencher « + » en tapant le bord de « - ».
   ============================================================ */
.qty-btn,
.product-card__taille {
  position: relative;
}
.qty-btn::after,
.product-card__taille::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 44px;
  width: calc(100% + 6px);
}

/* Lien texte du tiroir : la zone vient du padding, pas d'un pseudo-element,
   sinon elle deborderait sur le bouton de commande juste au-dessus. */
@media (max-width: 47.99em) {
  .cart-drawer__cart-link {
    padding: 0.7rem 0;
    margin-top: 0;
  }
}

/* --- 14/09 review v2 : offre SANS carte ni fond (owner) ---
   Le gros bloc noir a halo plait en interne mais le client n'a jamais vu ca
   ailleurs. On revient au format des grands sites : deux lignes de texte avec
   une icone, un filet fin au-dessus et au-dessous, rien d'autre. */
.pdp__offer.pdp__offer--simple {
  background: none !important; color: #0a0f1a; border: 0 !important; border-radius: 0;
  box-shadow: none !important; animation: none !important; overflow: visible;
  border-top: 1px solid #e5e7eb !important; border-bottom: 1px solid #e5e7eb !important;
  padding: 0.75rem 0 !important; margin: 0 0 0.9rem; gap: 0.15rem; text-decoration: none;
}
.pdp__offer--simple::before, .pdp__offer--simple::after { content: none !important; display: none !important; }
.pdp__offer--simple .pdp__offer-main {
  font-family: var(--f-body); font-style: normal; text-transform: none; letter-spacing: 0;
  font-weight: 700; font-size: 0.95rem; line-height: 1.3; color: #0a0f1a;
}
.pdp__offer--simple .pdp__offer-main strong { color: #0a0f1a !important; font-weight: 700; }
.pdp__offer--simple .pdp__offer-main svg { color: #2563eb !important; }
.pdp__offer--simple .pdp__offer-sub { font-size: 0.8rem; color: #6b7280; font-weight: 400; }
.pdp__offer--simple .pdp__offer-line2--v3 {
  display: flex; align-items: center; justify-content: flex-start !important; align-self: stretch; text-align: left; gap: 0.4rem; margin: 0.45rem 0 0; padding: 0; border: 0;
  font-weight: 700; font-size: 0.95rem; color: #0a0f1a;
}
.pdp__offer--simple .pdp__offer-line2--v3 svg { width: 1.1rem; height: 1.1rem; margin-right: 0.15rem; color: #2563eb; flex: 0 0 auto; }
.pdp__offer--simple .pdp__offer-line2--v3 strong { color: #047857 !important; font: inherit; text-transform: none; }
.pdp__offer--simple.pdp__offer--done .pdp__offer-sub { color: #047857; font-weight: 600; }
/* 14/09 owner v3 : le vert faisait une 3e couleur (le site ne s'en sert que pour
   Trustpilot). Bande bleu tres clair, format le plus courant chez les boutiques foot
   (footkorner, OM, decathlon). Fond clair + texte fonce : un bleu clair EN TEXTE
   serait illisible. « offert » #1d4ed8 = 6,2:1 sur #eff6ff (AA), icones #2563eb. */
.pdp__offer.pdp__offer--simple {
  background: #eff6ff !important; border: 1px solid #dbeafe !important;
  border-radius: 10px; padding: 0.75rem 0.9rem !important;
}
.pdp__offer--simple .pdp__offer-vert,
.pdp__offer--simple .pdp__offer-line2--v3 strong { color: #1d4ed8 !important; font-style: normal; }
.pdp__offer--simple .pdp__offer-main svg,
.pdp__offer--simple .pdp__offer-line2--v3 svg { color: #2563eb !important; }
.pdp__offer--simple.pdp__offer--done { background: #ecfdf5 !important; border-color: #a7f3d0 !important; }
/* 14/09 (owner) : jauge 3+1 du panier au format de la carte de la fiche produit. */
.pack-simple { margin: 0.6rem 0 0.7rem; padding: 0.7rem 0.9rem; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 10px; color: #0a0f1a; }
.pack-simple__main { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--f-body); font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.pack-simple__main svg { width: 1.1rem; height: 1.1rem; flex: none; color: #2563eb; }
.pack-simple__main strong { font-weight: 700; }
.pack-simple__main em { font-style: normal; color: #1d4ed8; }
.pack-simple__sub { margin: 0.15rem 0 0 1.6rem; font-size: 0.8rem; line-height: 1.3; color: #6b7280; }
.pack-simple--done { background: #ecfdf5; border-color: #a7f3d0; }
.pack-simple--done .pack-simple__sub { color: #047857; font-weight: 600; }

/* 17/09 au soir — REDUCTION MOBILE DU BANDEAU 3+1.
   Les cinq lignes qui faisaient ce travail ciblaient `.pack-progress*`, une
   classe que plus aucun fichier ne rend depuis le 14/09 (5694802 l'a remplacee
   par `.pack-simple`) : le plus gros bandeau du tiroir etait le SEUL a ne
   recevoir aucune reduction mobile. Il faut les poser APRES les regles de base
   ci-dessus, pas dans le bloc mobile du haut du fichier : meme specificite
   (0,1,0), une media query n'en ajoute pas, donc c'est l'ordre source qui
   tranche. Mesure a 360 px de large : 79,8 -> ~66 px. */
@media (max-width: 749px) {
  .pack-simple { padding: 0.55rem 0.7rem; margin: 0.4rem 0 0.5rem; }
  .pack-simple__main { font-size: 0.87rem; }
  .pack-simple__main svg { width: 1rem; height: 1rem; }
  .pack-simple__sub { margin: 0.1rem 0 0 1.5rem; font-size: 0.75rem; }

/* 18/09 (Clarity, client iPhone qui tapait son flocage) : Safari iOS ZOOME sur tout champ dont le
   texte fait moins de 16 px, et la page reste zoomée et décalée ensuite. Champs concernés : flocage
   nom + numéro (14 px), tri et filtre prix des collections (12-13 px), e-mail newsletter (15 px).
   Écrans tactiles seulement, la version ordinateur ne bouge pas. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]),
  select,
  textarea { font-size: 16px !important; }
  /* le menu de tri en 16 px poussait le bouton « liste » hors de l'écran : il rétrécit à la place */
  .collection__toolbar .collection__sort { flex: 1 1 auto; min-width: 0; }
  .collection__toolbar .collection__sort select { width: 100%; min-width: 0; }
  .collection__toolbar .collection__view { flex: 0 0 auto; }
}

/* 23/09 (Clarity n°21) : lien « + Ajouter le flocage (offert) » sous un maillot du panier sans flocage */
.cart-line__ajout-floc { display: inline-block; margin: 4px 0 2px; font-size: 0.8rem; font-weight: 700; color: #1a47e0; text-decoration: underline; text-underline-offset: 2px; }
.cart-line__ajout-floc span { color: #00a36c; font-weight: 700; }
/* Page de recherche : aide quand on cherche « flocage » */
.aide-floc { margin: 4px 0 18px; padding: 14px 16px; border-radius: 14px; background: #eef3ff; border: 1.5px solid #c9d7ff; }
.aide-floc__titre { margin: 0 0 8px; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1rem; line-height: 1.2; }
.aide-floc__titre b { color: #00a36c; }
.aide-floc ol { margin: 0 0 10px; padding-left: 1.2em; font-size: 0.92rem; line-height: 1.45; }
.aide-floc li + li { margin-top: 6px; }
.aide-floc__liens { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 0.9rem; }
.aide-floc__btn { display: inline-block; padding: 9px 16px; border-radius: 999px; background: #0f2f5c; color: #fff !important; font-weight: 700; text-decoration: none; }
.aide-floc__faq { color: #1a47e0; text-decoration: underline; }

/* 27/09 (owner) : fiches épuisées (stock aligné sur Salah) */
.product-card--epuise .product-card__media { opacity: .5; filter: grayscale(.7); }
.product-card .price-badge.price-badge--epuise {
  display: inline-block !important; position: absolute; top: 8px; left: 8px; z-index: 2;
  background: #3c4043 !important; color: #fff !important; font-size: 12px; font-weight: 700;
  padding: 4px 9px; border-radius: 4px; text-transform: uppercase; letter-spacing: .02em;
}
.product-card--epuise .price, .product-card--epuise .price__amount { color: #8a8d91 !important; }
.pdp .pdp__atc:disabled, .pdp .pdp__atc[data-produit-indispo],
.pdp__sticky-btn:disabled {
  background: #e3e4e6 !important; color: #6b6f76 !important; border-color: #e3e4e6 !important;
  box-shadow: none !important; cursor: not-allowed !important;
}
.pdp__epuise-note { margin: 10px 0 0; font-size: 15px; text-align: center; color: #444; }
.pdp__epuise-note a { color: var(--c-accent, #1b3cff); font-weight: 700; text-decoration: underline; }

/* 27/09 : version (Normal/Player) indisponible pour la taille choisie */
.perso__version.is-version-off { pointer-events: none; }
.perso__version.is-version-off .perso__version-card { opacity: .4; }
.perso__version.is-version-off .perso__version-name { text-decoration: line-through; }