/* PDP — porté de pdp-example.html l.59-381 */
  /* Typo self-host — Clash Display (display) + Satoshi (corps), WOFF2, font-display:swap */
  :root{
    --ink:#0E0E0E; --bone:#F5F3EE; --volt:#C8FF00; --ash:#6B6B6B; --red:#E4002B;
    --line:#e6e3db; --ink2:#181818; --mute:#b9b6ae; --ease:cubic-bezier(.2,.7,.2,1);
    --display:'Clash Display','Arial Narrow',sans-serif; --body:'Satoshi',system-ui,'Segoe UI',Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  @media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
  body{background:var(--bone);color:var(--ink);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased;padding-bottom:84px}
  @media(min-width:961px){body{padding-bottom:0}}
  button{font-family:inherit;cursor:pointer}
  :focus-visible{outline:3px solid var(--volt);outline-offset:2px;border-radius:4px}

  /* ===== wordmark footer (le header ink simple est remplacé par le header Bento — CSS en 2ᵉ <style>) ===== */
  .wm{font-family:var(--display);font-size:18px;text-transform:lowercase;transform:skewX(-8deg);letter-spacing:.02em;
      color:var(--bone);text-decoration:none;display:inline-block}
  .wm .s{color:var(--volt)}
  #cartcount{display:inline-block;min-width:1ch;text-align:center}
  #cartcount.roll{animation:numroll .28s var(--ease)}
  @keyframes numroll{from{transform:translateY(.65em);opacity:0}to{transform:none;opacity:1}}

  main.wrap{max-width:1240px;margin:0 auto;padding:20px 22px 70px}
  .crumb{font-size:11.5px;color:var(--ash);margin-bottom:16px}
  .crumb b{color:var(--ink);font-weight:600}

  /* ===== langage gsec partagé ===== */
  .kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);font-weight:700;margin-bottom:6px}
  .tag{background:var(--volt);color:var(--ink);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
       border-radius:6px;padding:3px 8px;transform:skewX(-8deg);display:inline-block}
  .gcard .tag,.rcard .tag{align-self:flex-start}
  .tag.zap{animation:tagin .32s var(--ease)}
  @keyframes tagin{from{opacity:0;transform:skewX(-8deg) scale(.55)}60%{transform:skewX(-8deg) scale(1.12)}to{opacity:1;transform:skewX(-8deg) scale(1)}}
  .gsec{margin-top:56px}
  .gsec h2{font-family:var(--display);font-size:clamp(20px,2.6vw,28px);text-transform:uppercase;line-height:1.05}
  .gsec h2 .v{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
  .gsec .sub{font-size:13.5px;color:var(--ash);margin-top:6px;max-width:62ch}

  /* scroll-reveal léger (classe .rv posée par le JS → jamais caché sans JS) */
  .js .rv{opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
  .js .rv.d1.in{transition-delay:.07s}

  /* ===== morph bouton unifié (… → ✓) : .lb / .dts / .ck2 + états .busy / .done ===== */
  .lb{display:inline-block;transition:opacity .15s var(--ease)}
  .dts,.ck2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
  .busy .lb,.done .lb{opacity:0}
  .busy .dts{opacity:1}
  .busy,.done{pointer-events:none}
  .dts i{width:4px;height:4px;border-radius:50%;background:currentColor;margin:0 2.5px}
  .cta .dts i{width:5px;height:5px;margin:0 3px}
  .busy .dts i{animation:dotb .45s var(--ease) infinite alternate}
  .busy .dts i:nth-child(2){animation-delay:.12s}
  .busy .dts i:nth-child(3){animation-delay:.24s}
  @keyframes dotb{from{opacity:.25;transform:translateY(1px)}to{opacity:1;transform:translateY(-2px)}}
  .done .ck2{opacity:1;animation:ckin .3s var(--ease)}
  @keyframes ckin{0%{opacity:0;transform:scale(.35)}60%{transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}

  /* ===== HERO : shell 2 colonnes ===== */
  .hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:26px;align-items:start}
  @media(max-width:960px){.hero{grid-template-columns:1fr;gap:18px}}

  /* STAGE (scène ink, spin 360°) */
  .stage{background:var(--ink);color:var(--bone);border:1.5px solid var(--ink);border-radius:16px;padding:20px 22px 18px;
         position:relative;display:flex;flex-direction:column;min-height:520px;overflow:hidden}
  @media(max-width:960px){.stage{min-height:420px}}
  /* Basse définition : la photo est bornée à sa taille native (400px) et centrée, plutôt
     qu'étirée sur les 632px de la colonne. Net en desktop. La hauteur de scène est réduite
     d'autant pour que le cadre ne soit pas majoritairement vide autour de l'image. */
  .stage.is-lowres .gal{max-width:400px;margin-inline:auto;width:100%}
  .stage.is-lowres{min-height:440px}
  @media(max-width:960px){.stage.is-lowres{min-height:400px}}
  .stage .srow{display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:2}
  .stage .cap{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600}
  .pct{background:var(--volt);color:var(--ink);font-family:var(--display);font-size:17px;padding:5px 12px;border-radius:8px;transform:skewX(-8deg)}
  .pct.zap{animation:tagin .32s var(--ease)}

  .gal{flex:1;position:relative;min-height:240px;margin:10px 0 4px;border-radius:12px;overflow:hidden;background:#fff;
       touch-action:pan-y pinch-zoom;cursor:grab;user-select:none}
  .gal:active{cursor:grabbing}
  .gal img,.gal video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#fff}
  .gal video{object-fit:cover;background:var(--ink);cursor:default}
  .gal img[hidden],.gal video[hidden]{display:none}

  /* ZOOM (hover desktop) : la source haute-res se pose en overlay plein cadre, panée au curseur.
     Jamais chargée avant le premier survol (cf. JS) — zéro coût sur le LCP. */
  .gal.can-zoom{cursor:zoom-in}
  .zoomlens{position:absolute;inset:0;background-repeat:no-repeat;background-size:220%;background-color:#fff;
            opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:2}
  .gal.is-zooming .zoomlens{opacity:1}
  .gal.is-zooming img#galMain{opacity:0}
  @media(prefers-reduced-motion:reduce){.zoomlens{transition:none}}

  /* ZOOM (double-tap mobile) : pas de modal (Baymard) — l'image se scale sur place, centrée
     sur le point de contact. Le pinch natif passe par touch-action ci-dessus, rien en JS. */
  #galMain.is-tapzoom{transform:scale(2.2);transition:transform .25s ease;position:relative;z-index:1}
  @media(prefers-reduced-motion:reduce){#galMain.is-tapzoom{transition:none}}

  /* ESSAI lightbox desktop (2026-08-05) — cf. ds-pdp.js. Le mobile n'est pas concerné :
     le JS ne construit rien sans (hover: hover) et (pointer: fine), donc aucune de ces
     règles n'a de sujet sur tactile. À généraliser ou à retirer avec le JS. */
  .gal.can-open{cursor:zoom-in}
  .lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;gap:10px;
            background:rgba(18,18,18,.94);padding:24px;overscroll-behavior:contain}
  .lightbox.is-on{display:flex}
  .lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%;max-height:100%}
  .lb-img{max-width:min(1400px,84vw);max-height:84vh;width:auto;height:auto;object-fit:contain;
          background:#fff;border-radius:8px}
  .lb-cap{color:#fff;font-size:13px;letter-spacing:.04em;opacity:.7}
  .lightbox button{background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:999px;
                   width:44px;height:44px;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}
  .lightbox button:hover{background:rgba(255,255,255,.26)}
  .lightbox button:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .lb-close{position:absolute;top:18px;right:22px}
  @media(prefers-reduced-motion:no-preference){.lightbox.is-on{animation:lbIn .16s ease}}
  @keyframes lbIn{from{opacity:0}to{opacity:1}}

  .spinctl{display:flex;align-items:center;justify-content:center;gap:14px;z-index:2}
  .rot{width:44px;height:44px;border-radius:50%;border:1.5px solid #3a3a3a;background:var(--ink2);color:var(--bone);font-size:17px;
       transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
  .rot:hover{background:var(--volt);color:var(--ink);border-color:var(--volt);transform:translateY(-2px)}
  .rot:active{transform:scale(.9)}
  .spin-hint{text-align:center;font-size:11px;color:#7d7a72;margin-top:8px}

  .thumbs{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
  .thumb{position:relative;width:52px;height:44px;border-radius:9px;border:1.5px solid #333;padding:0;overflow:hidden;background:#fff;
         transition:transform .2s var(--ease),border-color .2s var(--ease)}
  .thumb img{display:block;width:100%;height:100%;object-fit:cover}
  .thumb .tvplay{position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;background:var(--volt);color:var(--ink);
                 display:flex;align-items:center;justify-content:center;font-size:9px;padding-left:2px;pointer-events:none}
  .thumb:hover{transform:translateY(-2px);border-color:var(--mute)}
  .thumb[aria-pressed="true"]{border-color:var(--volt)}

  /* BUY BOX */
  .buy .disp{font-family:var(--display);font-size:clamp(28px,3.4vw,42px);text-transform:uppercase;line-height:.98;margin-top:2px}
  .buy .disp .v{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
  .genre{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
  .gchip{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:3px 10px;line-height:1.4}
  .ghint{font-size:12px;color:var(--ash)}
  .benefit{font-size:13.5px;color:var(--ash);margin-top:8px;max-width:52ch}
  .rate{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:8px}
  .rate .stars{letter-spacing:1px;color:var(--ink)}
  .rate a{color:var(--ash)}

  .pricebox{border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-top:14px;
            transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
  .pricebox:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 12px 26px -14px #0003}
  .prow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .now{font-family:var(--display);font-size:40px;line-height:1}
  .was{color:var(--ash);text-decoration:line-through;font-weight:600;font-size:15px}
  .was-lab{text-decoration:none;font-weight:600;font-size:12px;opacity:.8}
  .save{font-size:12.5px;font-weight:700;color:var(--ink)}
  .anchor{font-size:11px;color:var(--ash);margin-top:6px}
  .auth{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;font-weight:600}
  .auth span{display:flex;align-items:center;gap:6px}
  .auth .chk{width:16px;height:16px;border-radius:50%;background:var(--volt);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex-shrink:0}

  .blk{margin-top:18px}
  .blk .bh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
  .blk .bl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
  .blk .bl b{font-weight:600;color:var(--ash);text-transform:none;letter-spacing:0;margin-left:6px}
  .glink{background:none;border:none;font-size:12px;font-weight:600;text-decoration:underline;color:var(--ink);padding:0}

  /* swatches coloris */
  .sws{display:flex;gap:10px}
  .sw{position:relative;width:56px;height:56px;border-radius:14px;border:1.5px solid var(--line);padding:3px;background:#fff;
      transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
  .sw i{display:block;width:100%;height:100%;border-radius:10px}
  .sw img{display:block;width:100%;height:100%;border-radius:10px;object-fit:cover}
  .sw:hover{transform:scale(1.08);border-color:var(--ink)}
  .sw:active{transform:scale(.95)}
  .sw[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
  .sw .ck{position:absolute;right:-6px;top:-6px;width:20px;height:20px;border-radius:50%;background:var(--volt);color:var(--ink);
          display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;opacity:0;transform:scale(.4);pointer-events:none;
          transition:opacity .2s var(--ease),transform .25s var(--ease)}
  .sw[aria-pressed="true"] .ck{opacity:1;transform:scale(1)}
  .sw[aria-pressed="true"] .ck.zap{animation:ckin .3s var(--ease)}

  /* sélecteur de variations — grille serrée pour les pointures (nombres courts) */
  .swatches{display:flex;flex-wrap:wrap;gap:10px}
  .swatch{width:60px;height:60px;padding:2px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;overflow:hidden;transition:border-color .15s var(--ease),transform .15s var(--ease)}
  .swatch img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
  .swatch .swph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:10px;background:linear-gradient(135deg,#eceadf,#cfccc2);font-size:12px;font-weight:800;text-transform:uppercase;color:var(--ash)}
  .swatch:hover{transform:translateY(-2px);border-color:var(--ink)}
  .swatch.is-on{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
  /* Mécanique 2 : vignettes-LIENS vers les fiches sœurs (1 coloris = 1 produit).
     <a> est inline par défaut → il faut le passer en bloc pour hériter du gabarit .swatch. */
  a.swatch{display:block;box-sizing:border-box;text-decoration:none;flex:0 0 auto}
  a.swatch[aria-current="page"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
  a.swatch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .sibcount{font-size:12px;font-weight:700;color:var(--ash);text-transform:uppercase;letter-spacing:.04em}
  /* §9 : catalogue pas encore tarifé — on l'annonce, on n'invente pas un 0,00 € */
  .now .soon{font-size:.55em;font-weight:700;color:var(--ash);letter-spacing:.02em}
  .sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
  /* ...et flux libre pour les libellés textuels (couleurs : « Baritone Blue/Frozen Emerald »),
     qu'une grille à colonnes fixes tronquerait ou étirerait absurdement. */
  .sizes.is-text{display:flex;flex-wrap:wrap}
  .sizes.is-text .size{height:auto;min-height:40px;padding:9px 14px;font-size:13px;text-align:left}
  .size{position:relative;height:48px;border:1.5px solid var(--ink);border-radius:10px;font-weight:600;font-size:14px;background:#fff;
        transition:transform .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
  .size:hover:not(:disabled){transform:translateY(-2px)}
  .size:active:not(:disabled){transform:scale(.92)}
  .size[aria-pressed="true"]{background:var(--ink);color:#fff}
  .size.pop{animation:szpop .28s var(--ease)}
  @keyframes szpop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
  .size:disabled{color:#c5c5c5;border-color:#e4e4e4;text-decoration:line-through;cursor:not-allowed}
  .size.reco::after{content:'reco';position:absolute;top:-9px;right:-6px;background:var(--volt);color:var(--ink);font-size:9px;font-weight:800;
        padding:1px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:.05em}
  .sizesys{font-size:11.5px;color:var(--ash);margin-top:8px}
  .scarce{font-size:12.5px;color:var(--red);font-weight:600;margin-top:8px;display:flex;align-items:center;gap:7px}
  .scarce .d{width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0}
  /* Badge rareté — pastille encre + ombre dure volt, le vocabulaire des .lab des tuiles
     et des .tag : c'est la forme « percutante » de la page, pas un style inventé pour
     l'occasion. Ciblé sur #scarce et NON sur .scarce : la même classe habille aussi
     « Épuisé — les lots ne reviennent pas toujours… », qui est une phrase et non une
     pastille — en display capitales elle deviendrait illisible.
     Pas d'animation ni de clignotement : le §9 proscrit les procédés d'urgence, et ce
     badge doit convaincre par ce qu'il dit, pas par du mouvement. */
  /* PAS de width:max-content : un élément ainsi dimensionné a une largeur MINIMALE
     égale à sa largeur maximale, donc la colonne .buy ne peut plus se comprimer —
     elle passait de 346 à 471 px sur mobile et la page débordait horizontalement.
     inline-flex laisse le badge épouser son texte sur desktop et se replier en 390. */
  #scarce{display:inline-flex;max-width:100%;margin-top:12px;padding:10px 14px;border-radius:8px;
          background:var(--ink);color:var(--bone);
          font-family:var(--display);font-size:13.5px;font-weight:600;
          text-transform:uppercase;letter-spacing:.045em;line-height:1.25;gap:10px}
  #scarce .d{width:8px;height:8px;border-radius:0;background:var(--volt);
             transform:skewX(-8deg);box-shadow:none}
  @media(max-width:600px){ #scarce{font-size:12.5px;padding:9px 12px} }

  /* fit-finder */
  .ff{border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:14px 16px;margin-top:14px;
      transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
  .ff:hover{border-color:var(--ink);box-shadow:0 12px 26px -14px #0003}
  .ff>summary.ffsum{cursor:pointer;list-style:none;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
  .ff>summary.ffsum::-webkit-details-marker{display:none}
  .ff>summary.ffsum .ffico{font-size:15px;flex-shrink:0}
  .ff>summary.ffsum .ffq{white-space:nowrap}
  @media(max-width:560px){.ff>summary.ffsum .fftag{display:none}}
  .ff>summary.ffsum .fftag{margin-left:auto;font-weight:600;color:var(--ash);font-size:12px;text-decoration:underline;text-underline-offset:2px}
  .ff>summary.ffsum::after{content:"›";font-size:18px;line-height:1;color:var(--ash);margin-left:6px;transition:transform .2s var(--ease)}
  .ff[open]>summary.ffsum::after{transform:rotate(90deg)}
  .ffbody{margin-top:12px;animation:rise .25s var(--ease)}
  .ff .q{font-size:13px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
  .ff .q .fnum{font-family:var(--display);color:var(--ash);font-size:12px;border:1px solid var(--line);border-radius:50%;width:22px;height:22px;
               display:inline-flex;align-items:center;justify-content:center;background:var(--bone);flex-shrink:0}
  .ffrow{display:flex;flex-wrap:wrap;gap:7px}
  .ffbtn{border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:8px 13px;font-size:13px;font-weight:600;
         transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease),transform .15s var(--ease)}
  .ffbtn:hover{transform:translateY(-1px);border-color:var(--ink)}
  .ffbtn:active{transform:scale(.94)}
  .ffbtn[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .ffstep2{display:none;margin-top:14px}
  .ffstep2.open,.ffstep2.on{display:block;animation:rise .3s var(--ease)}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .ffres{display:none;margin-top:14px;background:var(--ink);color:var(--bone);border-radius:11px;padding:12px 14px;font-size:13px;align-items:center;gap:10px}
  .ffres.show{display:flex;animation:rise .3s var(--ease)}
  .ffres .big{font-family:var(--display);font-size:26px;color:var(--volt);flex-shrink:0}
  .ffres.oos .big{color:var(--red)}

  /* CTA + ligne livraison */
  .selline{font-size:12px;color:var(--ash);margin-top:16px}
  .selline b{color:var(--ink)}
  .cta{position:relative;background:var(--volt);color:var(--ink);border:none;font-family:var(--display);font-size:18px;text-transform:uppercase;
       letter-spacing:.04em;width:100%;padding:15px;border-radius:12px;margin-top:8px;
       transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px #c8ff0055}
  .cta:active{transform:scale(.98)}
  /* strip de confiance sous le CTA (icônes SVG stroke + badges paiement gsec) */
  .trust-strip{list-style:none;margin-top:12px;border:1.5px solid var(--line);border-radius:16px;background:#fff;
               padding:12px 14px;display:flex;flex-direction:column;gap:9px;
               transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
  .trust-strip:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 12px 26px -14px #0003}
  .ts-item{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink);flex-wrap:wrap;line-height:1.35}
  .ts-item small{color:var(--ash);font-size:11.5px}
  /* Délai de livraison : deux variantes, un seul point de rupture (960 px, celui du
     reste du thème). Desktop = la formule complète des CGV, elle tient sur une ligne.
     Mobile = « Expédié sous 72 h » seul et cliquable : la ligne complète passait sur
     deux lignes et décrochait le texte de son icône (128 px → 172 px en 390 px).
     `display:none` retire aussi la variante masquée de l'arbre d'accessibilité :
     le texte est écrit deux fois dans le DOM, jamais annoncé deux fois.

     SEUIL À 1060 px ET NON 960. Mesuré le 20/08 sur toute la plage de largeurs : posée à
     960 px, la variante longue se repliait entre 961 et 1050 px (28 px → 55 puis 72 px),
     alors que l'ancien libellé, plus court, y tenait sur une ligne. C'était donc une
     RÉGRESSION que j'avais introduite, invisible parce que je n'avais capturé que 1280 et
     390 px. La ligne redevient stable à partir de 1070 px. Sous 360 px elle se replie déjà
     avec les deux libellés : ce n'est pas lié à ce changement, et ce n'est pas corrigé. */
  .ts-liv-m{display:none}
  @media(max-width:1060px){
    .ts-liv-d{display:none}
    .ts-liv-m{display:inline}
    /* Le soulignement est réservé au sélecteur `a.` : sur /en/ la variante mobile est un
       <span>, pas un lien, parce que la page Livraison n'est pas traduite. Un texte
       souligné qui ne mène nulle part promet un clic qu'on ne tient pas. */
    a.ts-liv-m{color:inherit;text-decoration:underline;
               text-underline-offset:3px;text-decoration-thickness:1px;
               text-decoration-color:rgba(0,0,0,.35)}
    a.ts-liv-m:hover,a.ts-liv-m:focus-visible{text-decoration-color:currentColor}
  }
  .ts-ic{width:28px;height:28px;flex-shrink:0;color:var(--ink);background:var(--bone);border:1px solid var(--line);
         border-radius:8px;padding:5px}
  .ts-pay .ts-ic{background:var(--volt);border-color:var(--volt)}
  .ts-badges{list-style:none;display:flex;gap:5px;flex-wrap:wrap}
  .ts-badges li{font-size:10px;font-weight:600;color:var(--ash);background:#fff;border:1.5px solid var(--line);
                border-radius:6px;padding:2px 7px;letter-spacing:.02em;white-space:nowrap}

  /* sticky mobile bar */
  .smobile{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:var(--bone);padding:10px 16px;
           display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:25}
  @media(min-width:961px){.smobile{display:none}}
  .smobile .sum{font-size:11px;color:var(--mute);line-height:1.35;min-width:0}
  .smobile .sum b{display:block;font-family:var(--display);font-size:19px;color:var(--volt);letter-spacing:.02em}
  .smobile .cta{margin:0;width:auto;padding:12px 20px;font-size:14px;box-shadow:none;flex-shrink:0}

  /* ===== SECTION GUIDES (« On te donne d'abord ») ===== */
  .guides{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
  @media(max-width:820px){.guides{grid-template-columns:1fr}}
  .gcard{text-align:left;border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:18px;display:flex;flex-direction:column;gap:8px;
         transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
  .gcard:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 12px 26px -14px #0003}
  .gcard .gt{font-family:var(--display);font-size:17px;text-transform:uppercase;line-height:1.1}
  .gcard p{font-size:12.5px;color:var(--ash)}
  .gcard .go{margin-top:auto;font-size:12px;font-weight:700;text-decoration:underline}

  /* ===== DESCRIPTION produit (copy réécrite) ===== */
  .descgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;margin-top:18px}
  @media(max-width:820px){.descgrid{grid-template-columns:1fr}}
  .dspec ul,.dfit ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
  .dspec li,.dfit li{display:flex;gap:10px;line-height:1.45}
  .dspec li::before,.dfit li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--volt);transform:skewX(-8deg);flex-shrink:0;margin-top:6px}
  .dfit.no li::before{background:var(--line)}
  .dspec b,.dfit b{font-weight:700}
  /* La description produit est un paragraphe + une liste de specs + une note de chaussant.
     Sans respiration entre les trois, la liste colle au texte et la note colle a la derniere
     puce : le bloc se lit comme un pave. */
  .dspec>*+*{margin-top:14px}
  .dspec p{line-height:1.55}
  .dspec li b{white-space:nowrap}
  .dfit .dft{font-family:var(--display);font-size:15px;text-transform:uppercase;margin-bottom:10px}
  .dfitcol{display:flex;flex-direction:column;gap:14px}
  /* réorientation « near-miss » : micro-CTA vers l'alternative + rangée « À voir plutôt » */
  .alt-link{display:inline-block;font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:underline;
            text-decoration-color:var(--volt);text-decoration-thickness:2px;text-underline-offset:3px;
            transition:background .15s var(--ease)}
  .alt-link:hover{background:var(--volt)}
  .altrow{margin-top:16px}
  .alt-social{font-family:var(--body);font-size:13.5px;font-weight:700;color:var(--ink)}
  .altgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
  @media(max-width:720px){.altgrid{grid-template-columns:1fr}}
  .altcard{display:flex;flex-direction:column;gap:8px;border:1.5px solid var(--line);border-radius:16px;background:#fff;
           padding:12px;color:var(--ink);text-decoration:none;
           transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
  .altcard:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 12px 26px -14px #0003}
  .altph{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
         background:linear-gradient(135deg,#eceadf,#dcd8cc)}
  .altname{font-family:var(--display);font-size:15px;text-transform:uppercase;line-height:1.1}
  .altgo{font-size:12px;font-weight:700;text-decoration:underline;margin-top:auto}
  .altcard:hover .altgo{background:var(--volt)}

  /* ===== LIFESTYLE (emplacements photos — placeholders Phase 3, ratio réservé = zéro CLS) ===== */
  .lsph{display:block;position:relative;border-radius:12px;overflow:hidden;
        background:linear-gradient(135deg,#eceadf,#dcd8cc)}
  .lsph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .lsph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--ink)}
  .lslbl{position:absolute;left:12px;bottom:12px;font-size:10.5px;font-weight:600;color:var(--ink);
         background:#fffffff2;border:1px solid var(--line);border-radius:8px;padding:4px 10px;max-width:calc(100% - 24px)}
  .lsband .lsph{aspect-ratio:16/7;border-radius:16px;border:1.5px solid var(--line);margin-top:18px;
        background:linear-gradient(120deg,#e8e5db 0%,var(--lst,#cfccc2) 60%,#b9b6ae 115%)}
  @media(max-width:720px){.lsband .lsph{aspect-ratio:4/5}}
  .lsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
  @media(max-width:1020px){.lsgrid{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.lsgrid{grid-template-columns:1fr}}
  .lscard{padding:12px;display:flex;flex-direction:column;gap:10px}
  .lscard .lsph{aspect-ratio:4/5}
  .lscard .lsph.gv{background:linear-gradient(200deg,#2f2f2a 0%,var(--lstd,#6B6B6B) 118%)}
  .lscap{font-size:12.5px;font-weight:700}
  .lscap small{display:block;color:var(--ash);font-weight:500;font-size:11px;margin-top:2px}

  /* ===== SECTION AVIS (style gsec) ===== */
  .card{border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:18px;
        transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
  .card:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 12px 26px -14px #0003}
  .rsum{display:grid;grid-template-columns:auto 1px 1fr;gap:26px;align-items:center;margin-top:18px}
  @media(max-width:720px){.rsum{grid-template-columns:1fr;gap:16px}.rsum .vline{display:none}}
  .rsum .vline{background:var(--line);height:100%;min-height:120px}
  .rscore{text-align:center;min-width:130px}
  .rscore .big{font-family:var(--display);font-size:64px;line-height:.9}
  .rscore .stars{color:var(--ink);letter-spacing:2px;font-size:15px}
  .rscore .cnt{font-size:12px;color:var(--ash);margin-top:4px}
  .rmeta .dist{display:flex;flex-direction:column;gap:6px}
  .distrow{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ash)}
  .distrow .lbl{width:26px;font-weight:600;color:var(--ink)}
  .distrow .track{flex:1;height:7px;background:#eceadf;border-radius:7px;overflow:hidden}
  .distrow .fill{height:100%;background:var(--volt);border-radius:7px}
  .distrow .pc{width:34px;text-align:right}
  .fitbar{margin-top:14px}
  .fitbar .t{font-size:12px;color:var(--ash);display:flex;justify-content:space-between;margin-bottom:6px}
  .fitline{height:6px;background:#eceadf;border-radius:6px;position:relative}
  .fitline .mk{position:absolute;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid var(--volt);left:50%}
  .fitnote{font-size:11.5px;color:var(--ash);margin-top:6px}
  .rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
  @media(max-width:900px){.rgrid{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.rgrid{grid-template-columns:1fr}}
  .rcard{display:flex;flex-direction:column;gap:8px}
  .rcard .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .rcard .who{font-family:var(--display);font-size:16px;text-transform:uppercase;letter-spacing:.02em}
  .rcard .stars{color:var(--ink);letter-spacing:1px;font-size:13px}
  .rcard p{font-size:13px;color:#3a3a37}
  .rcard .meta{margin-top:auto;font-size:11.5px;color:var(--ash);border-top:1px solid var(--line);padding-top:8px}
  .rcard .meta b{color:var(--ink)}
  /* ===== galerie UGC « photos clients » (placeholders Phase 3, ratios réservés = zéro CLS) ===== */
  .ugcgal{margin-top:18px}
  .ugct{font-family:var(--display);font-size:clamp(16px,2vw,21px);text-transform:uppercase;line-height:1.05;margin-top:2px}
  .ugct .v{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
  .ugcgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:14px}
  @media(max-width:960px){
    .ugcgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
    .ugcgrid>*{flex:0 0 112px;scroll-snap-align:start}
  }
  .ugcph{position:relative;aspect-ratio:1;border-radius:12px;border:1.5px solid var(--line);overflow:hidden;display:block;
         background:linear-gradient(var(--uga,140deg),#eceadf 0%,var(--lst,#dcd8cc) 100%);
         transition:transform .2s var(--ease),border-color .2s var(--ease)}
  .ugcph:hover{transform:translateY(-2px);border-color:var(--ink)}
  .ugcph.dk{background:linear-gradient(var(--uga,140deg),#3a3a35 0%,var(--lstd,#6B6B6B) 120%)}
  .ugcph .pin{position:absolute;right:8px;bottom:8px;width:15px;height:15px;border-radius:50%;background:var(--volt);
              border:2.5px solid var(--ink);transition:transform .2s var(--ease)}
  .ugcph:hover .pin{transform:scale(1.25)}
  .ugcadd{aspect-ratio:1;border:1.5px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;
          align-items:center;justify-content:center;gap:7px;padding:8px;text-align:center;
          transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
  .ugcadd:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 12px 26px -14px #0003}
  .ugcadd:active{transform:scale(.96)}
  .ugcadd .plus{width:26px;height:26px;border-radius:50%;background:var(--volt);color:var(--ink);font-weight:800;font-size:15px;
                display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .ugcadd .t2{font-size:11px;font-weight:700;line-height:1.25}
  .ugcnote{font-size:11.5px;color:var(--ash);margin-top:10px}


/* barre mobile discrète (feedback owner 2026-07-17) : cachée tant que le CTA principal est visible,
   glisse quand il sort de l'écran, se retire au footer. Sans JS : visible (fallback). */
.js .smobile{transform:translateY(120%);visibility:hidden;transition:transform .32s var(--ease),visibility .32s}
.js .smobile.is-visible{transform:none;visibility:visible}
@media (prefers-reduced-motion: reduce){
  .js .smobile{transition:none}
  .js .smobile.is-visible{transform:none!important;visibility:visible!important}
}

/* ===== Bouton express (Apple Pay / Google Pay) =====
   Rendu sur `woocommerce_after_add_to_cart_form`, donc collé sous « Ajouter au panier ».
   C'est le SEUL endroit du site où `#wcpay-express-checkout-element` existe : le panier
   passe par le bloc express (autre balisage) et la page commande n'en rend aucun.

   `!important` obligatoire, et ce n'est pas de la surenchère : le JS de Stripe pose
   `margin:-4px` en style INLINE sur l'iframe (avec `width:calc(100% + 8px)` pour saigner
   le bord). Une règle de feuille de style sans `!important` perd contre l'inline et ne
   fait RIEN, sans erreur ni avertissement. Mesuré le 11/08 dans un vrai navigateur, à état
   `is-ready` comparable : marge calculée -4px avant, 8px après.

   Attention au calcul de tête : passer de -4 à 8 ne descend PAS le bouton de 12px. Un
   conteneur intermédiaire de Stripe (`.__PrivateStripeElement`) en absorbe la moitié —
   déplacement réel mesuré : 8px. Toute retouche de cette valeur doit être REMESURÉE,
   pas déduite.

   On ne touche que le haut : gauche, droite et bas gardent le -4px de Stripe, sinon on
   décale le rognage de bord qu'il a calculé. */
#wcpay-express-checkout-element > div > iframe{margin-top:8px !important}

/* ===== Recommandations « Tu aimeras aussi » =====
   Les cartes .pcard viennent de ds-base.css (toujours chargé), mais la grille .grid
   vit dans ds-plp.css, absente de la fiche produit. On redéclare donc uniquement la
   mise en grille ici, avec les mêmes valeurs que le catalogue — pas de duplication
   des cartes elles-mêmes. */
.ds-reco{margin-top:56px}
.ds-reco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:16px}
@media(max-width:520px){
  .ds-reco-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
}

  /* ===== Carte « 3× » Klarna =====
     Le cadre reprend EXACTEMENT .pricebox (1,5 px, rayon 16, fond blanc) : c'est
     ce qui la fait lire comme une information de la fiche et non comme un
     autocollant. Pas de :hover ici — la boite prix se souleve, la carte reste
     posee, la hierarchie tient.
     Le prix comptant reste dominant : 40 px contre 23 px. Regle non negociable.
     Aucun script tiers, aucun domaine nouveau : rien a changer dans la CSP. */
  .k3{margin-top:10px}
  .k3-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .k3-card{border:1.5px solid var(--line);border-radius:16px;background:#fff;
           padding:13px 15px;display:flex;align-items:center;gap:13px;
           clip-path:inset(0 100% 0 0)}
  .k3.is-go .k3-card{animation:k3wipe .42s cubic-bezier(.4,0,.2,1) .05s forwards}
  @keyframes k3wipe{to{clip-path:inset(0 0 0 0)}}

  .k3-stamp{position:relative;flex:none;width:66px;height:46px;display:flex;
            align-items:center;justify-content:center;opacity:0;margin-left:-4px}
  .k3-stamp b{position:relative;z-index:3;font-family:var(--display);font-size:23px;
              letter-spacing:-.05em;color:var(--ink);border:3px solid var(--ink);
              border-radius:6px;padding:2px 10px;background:var(--volt);
              box-shadow:2px 2px 0 #0e0e0e29}
  .k3-splat{position:absolute;inset:-12px;border-radius:50%;background:var(--volt);opacity:0;z-index:1}
  .k3.is-go .k3-stamp{animation:k3slam .40s cubic-bezier(.18,1.12,.3,1) .40s forwards}
  .k3.is-go .k3-splat{animation:k3splat .5s ease-out .44s forwards}
  @keyframes k3slam{0%{opacity:0;transform:scale(2.6) rotate(-17deg)}
                    62%{opacity:1;transform:scale(.92) rotate(-8.5deg)}
                    100%{opacity:1;transform:scale(1) rotate(-7deg)}}
  @keyframes k3splat{0%{opacity:.5;transform:scale(.22)}100%{opacity:0;transform:scale(1.5)}}

  .k3-side{opacity:0;display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
  .k3.is-go .k3-side{animation:k3up .4s cubic-bezier(.2,.8,.3,1) .76s forwards}
  @keyframes k3up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .k3-lbl{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
  .k3-amt{font-family:var(--display);font-size:23px;letter-spacing:-.04em;line-height:1.05}
  .k3-tail{font-size:10.5px;color:var(--ash);line-height:1.35;display:flex;align-items:center;
           gap:5px;flex-wrap:wrap;margin-top:1px}
  /* rose officiel Klarna, servi depuis notre propre domaine (klarna-pill.svg) */
  .k3-badge{background:#ffb3c7;color:var(--ink);font-family:var(--display);font-size:9.5px;
            padding:2px 6px;border-radius:3px}

  /* trois segments : la seule chose qui dit « trois » sans l'ecrire */
  .k3-segs{flex:none;display:flex;flex-direction:column;gap:3px;width:5px;align-self:stretch;padding:3px 0}
  .k3-segs i{flex:1;background:var(--line);border-radius:99px;display:block}
  .k3.is-go .k3-segs i:first-child{animation:k3seg .3s ease .96s forwards}
  @keyframes k3seg{to{background:var(--ink)}}

  /* Le pave legal du 20/11/2026 se depliera ICI, dans le cadre existant. */
  .k3-legal{border-top:1px solid var(--line);padding-top:8px;margin-top:8px;
            display:flex;flex-direction:column;gap:4px}
  .k3-legal .k3-big{font-size:12.5px;font-weight:700;line-height:1.3}
  .k3-legal .k3-small{font-size:9.5px;color:var(--ash);line-height:1.4}

  /* Mouvement reduit : etat FINAL directement, pas d'etat initial invisible.
     Sans ce bloc la carte resterait a opacity:0 pour qui refuse les animations. */
  @media (prefers-reduced-motion:reduce){
    .k3-card{clip-path:none !important;animation:none !important}
    .k3-stamp,.k3-side{opacity:1 !important;animation:none !important}
    .k3-stamp{transform:rotate(-7deg)}
    .k3-splat{opacity:0 !important;animation:none !important}
    .k3-segs i:first-child{background:var(--ink)}
  }