/* PLP — porté de plp-running.html l.48-109 + 567-800 */
  /* 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)}}

  /* ===================== PLP RUNNING — en-tête, layout, facettes ===================== */
  .plphead{margin-top:6px;max-width:920px}
  .plph1{font-family:var(--display);font-size:clamp(32px,4.6vw,54px);text-transform:uppercase;line-height:.96;margin-top:2px}
  .plph1 .v{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
  .plpintro{font-size:13.5px;color:var(--ash);margin-top:12px;max-width:78ch}
  .plpintro-wrap{position:relative;max-width:78ch}
  .plpintro-wrap .plpintro{margin-top:12px}
  .js .plpintro.is-clamped{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .plpintro-more{margin-top:6px;background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  .plpintro-more:hover{opacity:.7}
  .plpcount{font-size:12px;font-weight:600;color:var(--ash);margin-top:12px}

  .mobilebar{display:none;flex-wrap:wrap;gap:10px;position:sticky;top:74px;z-index:24;margin-top:16px}
  @media(max-width:960px){.mobilebar{display:flex}}
  .mobilebar button{flex:1;min-height:46px;border:1.5px solid var(--ink);border-radius:12px;background:#fff;
    font-family:var(--display);font-size:14px;text-transform:uppercase;letter-spacing:.04em;
    display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 24px -18px #000;
    transition:transform .2s var(--ease),background .2s var(--ease)}
  .mobilebar button:active{transform:scale(.97)}
  .mobilebar .fcount{background:var(--volt);border-radius:6px;padding:1px 7px;font-family:var(--body);font-size:11px;font-weight:800;transform:skewX(-8deg)}

  .plp{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:24px;align-items:start;margin-top:22px}
  @media(max-width:960px){.plp{display:block;margin-top:14px}}

  /* --- Sidebar filtres : accordéon PLAT (2026 : SSENSE/Zalando/Mytheresa).
     Plus de « pile de cartes » : filets fins entre sections, sections repliables,
     compteur d'actifs sur la puce, densité serrée. Sur PC le filtrage est instantané
     (AJAX) → pas de bouton « Appliquer » (masqué), on garde « Tout effacer » en tête. --- */
  .facets{position:sticky;top:78px;display:flex;flex-direction:column;gap:0;
          max-height:calc(100vh - 96px);overflow:auto;overscroll-behavior:contain;padding-bottom:4px;
          /* dégager le contenu de la scrollbar interne (sinon compteurs collés à la barre) + barre fine cohérente avec .fbrands/.fsizes */
          padding-right:12px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .facets::-webkit-scrollbar{width:6px}
  .facets::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .fhead{display:flex;align-items:center;gap:12px;padding:0 2px 6px}
  .fhead h2{font-family:var(--display);font-size:16px;text-transform:uppercase;letter-spacing:.03em}
  .fhead .fclear-top{margin-left:auto;font-size:12px;font-weight:600;color:var(--ash);text-decoration:underline;
                     text-underline-offset:3px;transition:color .15s var(--ease)}
  .fhead .fclear-top:hover{color:var(--ink)}
  .fhead .x{display:none}
  @media(max-width:960px){
    .facets{position:fixed;inset:0;z-index:60;background:var(--bone);padding:16px 18px 96px;max-height:none;gap:0;
            transform:translateY(101%);visibility:hidden;transition:transform .32s var(--ease),visibility .32s}
    .facets.open{transform:none;visibility:visible}
    .fhead h2{font-size:20px}
    .fhead .fclear-top{display:none}
    .fhead .x{display:flex;align-items:center;justify-content:center;margin-left:auto;background:none;border:none;
              font-size:24px;line-height:1;min-width:44px;min-height:44px}
  }
  @media(min-width:961px){.fapply{display:none}}

  .fgroup{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:0;margin:0;min-inline-size:auto}
  .fgroup:first-of-type{border-top:0}
  details.fgroup>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
          font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink);
          padding:15px 2px;min-height:24px;-webkit-user-select:none;user-select:none}
  details.fgroup>summary::-webkit-details-marker{display:none}
  details.fgroup>summary::after{content:"";margin-left:8px;flex:0 0 auto;width:8px;height:8px;margin-top:-4px;
          border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);
          transition:transform .2s var(--ease)}
  details.fgroup[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
  details.fgroup>summary:focus-visible{outline:3px solid var(--volt);outline-offset:2px;border-radius:4px}
  .fgcount{margin-left:auto;background:var(--ink);color:#fff;font-size:10px;font-weight:800;letter-spacing:0;
           min-width:17px;height:17px;padding:0 5px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
  .fgbody{padding:0 0 14px}
  /* progressive disclosure (Rayon) : ~7 visibles + « Voir plus » */
  details.fgroup:not(.is-exp) .fopt.xtra{display:none}
  .fvmore{background:none;border:0;padding:6px 6px;margin-top:2px;font:inherit;font-size:12.5px;font-weight:700;
          color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:34px}
  details.fgroup.is-exp .fvmore{display:none}

  /* --- toggle « Bons plans » : filtre promo, en tête des facettes. Interrupteur
     accessible (vraie case masquée) qui bascule au volt une fois activé. --- */
  .fgroup.fpromo{padding:2px}
  .fpromo-tog{display:flex;align-items:center;gap:11px;cursor:pointer;min-height:44px;font-size:14px;font-weight:700}
  .fpromo-tog input{position:absolute;opacity:0;width:0;height:0}
  .fpromo-sw{flex:0 0 auto;width:42px;height:24px;border-radius:999px;background:#e4e1d7;border:1.5px solid var(--line);
             position:relative;transition:background .18s var(--ease),border-color .18s var(--ease)}
  .fpromo-sw::after{content:"";position:absolute;top:1.5px;left:1.5px;width:18px;height:18px;border-radius:50%;
                    background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s var(--ease)}
  .fpromo-tog input:checked + .fpromo-sw{background:var(--volt);border-color:var(--ink)}
  .fpromo-tog input:checked + .fpromo-sw::after{transform:translateX(18px)}
  .fpromo-tog input:focus-visible + .fpromo-sw{outline:3px solid var(--volt);outline-offset:2px}
  .fpromo-lb b{font-weight:800}
  .fpromo-tog:hover .fpromo-sw{border-color:var(--ink)}
  .fopt{display:flex;align-items:center;gap:9px;min-height:34px;font-size:13px;cursor:pointer;border-radius:8px;padding:2px 6px}
  .fopt:hover{background:var(--bone)}
  .fopt input{accent-color:var(--ink);width:16px;height:16px;flex-shrink:0;margin:0}
  .fopt .cnt2{margin-left:auto;font-size:11px;color:var(--ash);font-weight:600}
  .fopt.off{opacity:.4}
  @media(max-width:960px){.fopt{min-height:44px}}

  /* Facette Marque : recherche rapide + liste scrollable (accès marque immédiat, haut de sidebar) */
  .fbsearch{width:100%;box-sizing:border-box;margin:8px 0 6px;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;
            font-family:inherit;font-size:13.5px;background:#fff;transition:border-color .15s var(--ease)}
  .fbsearch:focus{outline:none;border-color:var(--ink)}
  .fbsearch::placeholder{color:var(--ash)}
  .fbrands{max-height:232px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px;
           scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .fbrands::-webkit-scrollbar{width:6px}
  .fbrands::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .fbnone{color:var(--ash);font-size:13px;padding:6px 6px;margin:0}
  @media(max-width:960px){.fbrands{max-height:none}}

  .fprice .pv{font-family:var(--display);font-size:18px;margin:4px 0 2px}
  .fprice input[type=range]{width:100%;accent-color:var(--ink);min-height:30px;cursor:pointer}
  .fpresets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .fpre{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;min-height:34px;
        transition:transform .15s var(--ease),background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
  .fpre:hover{border-color:var(--ink);transform:translateY(-1px)}
  .fpre[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  @media(max-width:960px){.fpre{min-height:44px}}

  /* ~40 pointures (demi-tailles incluses) : en 3 colonnes ça faisait un mur de
     ~715px, contre l'UX. Grille DENSE auto-remplie (les tailles restent toutes
     visibles — on cherche sa pointure d'un coup d'œil, pas en accordéon) +
     hauteur plafonnée avec scroll interne pour ne jamais dépasser ~5 rangées,
     sur PC comme dans le tiroir mobile. */
  .fsizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;margin-top:6px;
          max-height:216px;overflow-y:auto;overscroll-behavior:contain;
          padding:2px;margin-inline:-2px;
          scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .fsizes::-webkit-scrollbar{width:6px}
  .fsizes::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .fsz{position:relative}
  .fsz input{position:absolute;opacity:0;pointer-events:none}
  .fsz span{display:flex;align-items:center;justify-content:center;min-height:36px;border:1.5px solid var(--line);border-radius:9px;
            font-size:12.5px;font-weight:600;background:#fff;cursor:pointer;padding:0 2px;
            transition:transform .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
  .fsz:hover span{border-color:var(--ink);transform:translateY(-1px)}
  .fsz input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
  .fsz input:focus-visible+span{outline:3px solid var(--volt);outline-offset:2px}
  /* mobile : cibles ≥44px (Baymard), un peu plus de hauteur visible dans le tiroir */
  @media(max-width:960px){
    .fsizes{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));max-height:264px}
    .fsz span{min-height:44px}
  }

  /* Facette Couleur : familles regroupées (pastille + libellé + compte), 2 colonnes */
  .fswatches{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:6px}
  .fsw{position:relative;display:flex;align-items:center;gap:8px;min-height:34px;padding:2px 6px;border-radius:9px;cursor:pointer}
  .fsw:hover{background:var(--bone)}
  .fsw input{position:absolute;opacity:0;pointer-events:none}
  .fsw .sw{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(14,14,14,.18);
           box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:transform .15s var(--ease)}
  .fsw .sw--multi{background:conic-gradient(#d1352b,#e9c531,#3f9f52,#2563c9,#7d4fc0,#e06699,#d1352b)}
  .fsw:hover .sw{transform:scale(1.12)}
  .fsw .swlab{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;min-width:0}
  .fsw .swlab .cnt2{font-size:11px;color:var(--ash);font-weight:600}
  .fsw input:checked+.sw{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ink);transform:scale(1.05)}
  .fsw input:checked~.swlab{font-weight:800}
  .fsw input:focus-visible+.sw{outline:3px solid var(--volt);outline-offset:2px}
  @media(max-width:960px){.fsw{min-height:44px}.fsw .sw{width:24px;height:24px}}

  /* Bouton d'application. Auparavant display:none sur desktop → aucune façon
     d'appliquer un filtre à la souris (ni bouton, ni auto-submit) : tous les
     filtres étaient inertes sur PC. On l'affiche maintenant en pied de sidebar
     desktop (batch des sélections, un seul rechargement), et il reste barre
     fixe en bas sur mobile. */
  .fapply{display:flex;gap:10px;align-items:center;margin-top:2px}
  .fapply .fclear{background:none;border:none;color:var(--ash);text-decoration:underline;font-size:13px;
                  cursor:pointer;min-height:44px;padding:0 8px}
  .fapply .fgo{flex:1;background:var(--volt);border:1.5px solid var(--ink);border-radius:12px;
               font-family:var(--display);font-size:14px;text-transform:uppercase;letter-spacing:.04em;
               min-height:46px;cursor:pointer;transition:transform .2s var(--ease)}
  .fapply .fgo:hover{transform:translateY(-1px)}
  .fapply .fgo:active{transform:scale(.97)}
  @media(max-width:960px){
    .fapply{position:fixed;left:0;right:0;bottom:0;padding:12px 18px;background:#fff;border-top:1px solid var(--line);
            z-index:61;margin-top:0}
    .fapply .fclear{min-height:48px;padding:0 10px}
    .fapply .fgo{font-size:15px;min-height:48px}
  }

  /* Filtres instantanés (AJAX) : état de chargement discret + barre de progression */
  .results{transition:opacity .14s ease;position:relative}
  .results.is-loading{opacity:.45;pointer-events:none}
  .results.is-loading::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:38%;border-radius:2px;
                              background:var(--volt);animation:plpbar 1s linear infinite;z-index:5}
  @keyframes plpbar{0%{left:-38%}100%{left:100%}}
  .morewrap.is-loading{opacity:.5;pointer-events:none}
  @media (prefers-reduced-motion:reduce){.results.is-loading::before{animation:none;width:100%;opacity:.5}}

  /* ===================== PLP RUNNING — chips, tri, grille, cartes ===================== */
  .chips[hidden],.nores[hidden]{display:none}
  .chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
  .chip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--ink);background:#fff;border-radius:999px;
        padding:6px 12px;font-size:12px;font-weight:600;min-height:34px;
        transition:background .15s var(--ease),transform .15s var(--ease)}
  .chip:hover{background:var(--volt)}
  .chip:active{transform:scale(.95)}
  .chip .x2{font-weight:800}
  .chip.in{animation:chipin .25s var(--ease)}
  @keyframes chipin{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
  .chipclear{background:none;border:none;font-size:12px;text-decoration:underline;color:var(--ash);min-height:34px;transition:color .15s var(--ease)}
  .chipclear:hover{color:var(--ink)}
  @media(max-width:960px){.chip,.chipclear{min-height:44px}}

  .sortbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
  .sortbar .sortsel{display:flex;align-items:center;gap:10px}
  .sortbar label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
  .sortbar select{border:1.5px solid var(--line);border-radius:10px;background:#fff;padding:9px 12px;font:inherit;
                  font-size:13px;font-weight:600;min-height:42px;cursor:pointer}
  .sortbar select:hover{border-color:var(--ink)}
  @media(max-width:960px){.sortbar{display:none}}

  .sheet{position:fixed;left:0;right:0;bottom:0;z-index:62;background:#fff;border-radius:16px 16px 0 0;padding:14px 18px 24px;
         transform:translateY(102%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s;
         box-shadow:0 -18px 40px -20px #0008}
  .sheet.open{transform:none;visibility:visible}
  .shead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .shead h3{font-family:var(--display);font-size:19px;text-transform:uppercase}
  .shead .x{background:none;border:none;font-size:22px;line-height:1;min-width:44px;min-height:44px}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:16px}
  @media(max-width:520px){.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}}
  .pcard{position:relative;border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:10px;
         display:flex;flex-direction:column;
         transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
  .pcard:hover,.pcard:focus-within{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 16px 34px -18px #0005}
  .pcard.stagin{animation:cardin .38s var(--ease) both;animation-delay:var(--d,0s)}
  @keyframes cardin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

  /* fix : quick-actions ancrées sur l'IMAGE (pas sur la carte) → le prix n'est jamais masqué */
  .pmedia-wrap{position:relative;display:block}
  .plpmore{margin-top:6px}
  .plpmore summary{display:inline-flex;align-items:center;gap:5px;cursor:pointer;list-style:none;font-weight:600;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
  .plpmore summary::-webkit-details-marker{display:none}
  .plpmore summary::after{content:"▾";text-decoration:none;font-size:11px}
  .plpmore[open] summary::after{content:"▴"}
  .plpmore>p{font-size:13.5px;color:var(--ash);max-width:75ch;margin-top:8px;line-height:1.55}
  .pmedia{position:relative;display:block;aspect-ratio:1;border-radius:11px;overflow:hidden;background:#fff}
  /* Carte produit des listes : CARRÉE depuis le 2026-08-10.
     Le portrait 4:5 mettait en valeur les photos de vêtements portés et écrasait les
     packshots. Mesuré sur les 6 956 fiches, part de la carte réellement occupée par
     le produit, `contain` appliqué :
         carte 4:5   → chaussures 29 %, textile Alo 83 %  (écart 61 points)
         carte 1:1   → chaussures 36 %, textile Alo 67 %  (écart 49 points)
     L'écart est irréductible — une chaussure est large et plate, une photo de vêtement
     porté remplit son cadre — mais le carré le réduit d'un cinquième sans rien couper,
     et c'est le format attendu par Merchant Center. Le 5:4 paysage ferait mieux encore
     (écart 39) au prix d'écraser le textile, qui est 35 % du catalogue.
     Scopé via .pmedia-wrap ; les carrousels de l'accueil étaient déjà carrés. */
  .pmedia-wrap .pmedia{aspect-ratio:1}
  .pmedia.skel::before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(100deg,transparent 30%,#ffffff88 50%,transparent 70%);
    transform:translateX(-100%);animation:skel 1.1s linear infinite}
  @keyframes skel{to{transform:translateX(100%)}}
  .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;display:block;z-index:2;
        transition:opacity .3s var(--ease),transform .3s var(--ease)}
  /* l'image reste visible quoi qu'il arrive (au-dessus du shimmer) — plus de dépendance au JS pour l'afficher */
  .pmedia.skel .pimg{opacity:1}
  .pimg.back{opacity:0}
  .pcard:hover .pimg.back,.pcard:focus-within .pimg.back{opacity:1}
  /* AU SURVOL, LA PHOTO SE RETIRE — elle ne grossit plus.
     La barre « Aperçu / Panier » apparaît par-dessus l'image ; en grossissant, le sujet
     descendait vers elle et sa semelle finissait sous les boutons. On fait l'inverse :
     le produit recule et remonte, la barre s'installe dans la place libérée.
     Rien au repos : le cadre reste plein tant qu'on ne survole pas, donc aucune fiche
     n'est rapetissée pour rien. transform seul, aucun recalcul de mise en page. */
  .pcard:hover .pimg,.pcard:focus-within .pimg{transform:translateY(-24px) scale(.86)}
  .pph{object-fit:unset}
  .pdisc{position:absolute;top:10px;left:10px;z-index:2;font-size:11px}
  .pmedia .lslbl{z-index:2}

  .wish{position:absolute;top:16px;right:16px;z-index:3;width:40px;height:40px;border-radius:50%;
        border:1.5px solid var(--line);background:#fffffff2;display:flex;align-items:center;justify-content:center;
        opacity:0;transform:translateY(-4px);
        transition:opacity .2s var(--ease),transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
  .pcard:hover .wish,.wish:focus-visible,.wish[aria-pressed="true"]{opacity:1;transform:none}
  @media(hover:none){.wish{opacity:1;transform:none;width:44px;height:44px}}
  .wish svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.8}
  .wish[aria-pressed="true"]{background:var(--volt);border-color:var(--ink)}
  .wish[aria-pressed="true"] svg{fill:var(--ink)}
  .wish.pop3{animation:qpop .28s var(--ease)}

  /* .qa / .qadd / .qsz vivent dans ds-qadd.css depuis le 2026-08-11 (partagés avec
     l'accueil, qui rend le même `.pcard`). Ne restent ici que l'aperçu rapide, qui
     n'existe que sur les listes, et l'ajustement tactile de la wishlist. */
  @media(hover:none){
    .qa .qview{display:none}  /* taper la carte ouvre déjà la fiche : l'aperçu ferait doublon */
    .wish{opacity:1;transform:none;width:38px;height:38px;top:10px;right:10px}
  }

  .pinfo{padding:10px 4px 4px;display:flex;flex-direction:column;gap:3px;flex:1}
  .pbrand{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);font-weight:700}
  .pname{font-family:var(--display);font-size:16px;text-transform:uppercase;line-height:1.12}
  .pname a{color:inherit;text-decoration:none}
  .pname a::after{content:"";position:absolute;inset:0;border-radius:16px;z-index:1}
  .prate{font-size:12px;color:var(--ash)}
  .prate b{color:var(--ink)}
  .pprice{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:4px}
  .pnow{font-family:var(--display);font-size:19px}
  .pwas{color:var(--red);text-decoration:line-through;font-size:12.5px;font-weight:600}
  .pwas-lab{color:var(--ash);font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:none;margin-right:4px;text-decoration:none}
  .peco{font-size:11px;font-weight:700;color:var(--eco)}
  /* P2 — pastilles coloris (groupe modèle). z-index:2 : passer AU-DESSUS de l'overlay .pname a::after (sinon non cliquables). */
  .pvars{position:relative;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px}
  .pvar{flex:0 0 auto;display:block;width:16px;height:16px;border-radius:50%;text-decoration:none;cursor:pointer;
        box-shadow:inset 0 0 0 1.5px #fff,0 0 0 1px rgba(0,0,0,.2);transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
  .pvar:hover,.pvar:focus-visible,.pvar.is-hi{transform:scale(1.18);box-shadow:inset 0 0 0 1.5px #fff,0 0 0 2px var(--ink);outline:none}
  .pvar.is-cur{box-shadow:inset 0 0 0 1.5px #fff,0 0 0 2px var(--ink)}
  .pvarn{font-size:11px;color:var(--ash);font-weight:600;margin-left:2px}
  /* l'attribut [hidden] doit gagner sur les display: des classes (.tag inline-block…) quand le JS masque badge/prix barré par coloris */
  .pcard [hidden]{display:none!important}

  .nores{border:1.5px dashed var(--line);border-radius:16px;background:#fff;padding:26px;text-align:center;
         font-size:13.5px;color:var(--ash);display:flex;flex-direction:column;gap:8px;align-items:center}
  .nores b{color:var(--ink)}
  .morewrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:26px}
  .more{position:relative;min-width:230px;min-height:48px;background:var(--ink);color:var(--bone);border:none;border-radius:12px;
        font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:.04em;padding:13px 26px;
        transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
  .more:hover{transform:translateY(-2px);background:var(--ink2);box-shadow:0 12px 26px -14px #0006}
  .more:active{transform:scale(.97)}
  .mhint{font-size:11.5px;color:var(--ash)}

  /* quick-view (réutilise .modal/.mbox) */
  /* largeur portée à 720 px le 19/08 : la fenêtre passe en deux colonnes (300 + reste) */
  #quickview .mbox{max-width:720px}
  .qv{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  @media(max-width:560px){.qv{grid-template-columns:1fr}}
  .qvim{position:relative;aspect-ratio:1;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
  .qvim img{width:100%;height:100%;object-fit:contain;display:block}
  .qvinfo{display:flex;flex-direction:column;gap:8px}
  .qvinfo h3{margin-bottom:0}
  .qvlab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-top:4px}
  .qvrow{display:flex;flex-wrap:wrap;gap:6px}
  .qvrow button{min-width:42px;min-height:40px;border:1.5px solid var(--line);border-radius:9px;background:#fff;
                font-weight:600;font-size:13px;transition:transform .15s var(--ease),background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
  .qvrow button:hover{border-color:var(--ink);transform:translateY(-1px)}
  .qvrow button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .qvinfo .cta{font-size:15px;padding:13px;margin-top:6px}
  .qvinfo .glink{align-self:flex-start;margin-top:2px}

  footer{margin-top:40px;padding:22px;text-align:center;font-size:11.5px;color:var(--ash);border-top:1px solid var(--line)}
  footer .wm{color:var(--ink);font-size:15px;margin-right:6px}

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    .js .rv{opacity:1;transform:none}
    /* + côté JS : morph boutons, count-up, ghost, pops/zaps court-circuités (états finaux instantanés) */
  }

  /* ===== VITRINE — sélection owner en tête de rayon (2026-08-09) =================
     Autonome : ne dépend d'aucune classe de ds-home.css, qui n'est pas chargée ici.
     Compacte par choix — Baymard : une page catégorie doit amener vite aux produits.
     Elle prend ~250 px, pas les 620 px d'un rail d'accueil.
     Défilement natif (scroll-snap) : le swipe mobile marche sans JS ; les flèches ne
     sont qu'un confort desktop, masquées sous 861 px (gestuel seul, cf. currency check). */
  .vitr{margin:22px 0 6px}
  .vitr-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:12px}
  .vitr-kick{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);font-weight:800;margin:0 0 2px}
  .vitr-h2{font-family:var(--display);font-size:clamp(17px,2vw,22px);text-transform:uppercase;line-height:1;margin:0}
  .vitr-h2 .v{color:transparent;-webkit-text-stroke:1.2px var(--ink)}
  .vitr-nav{margin-left:auto;display:flex;gap:8px}
  .vitr-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
            font-size:16px;line-height:1;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
  .vitr-btn:hover:not(:disabled){border-color:var(--ink);background:var(--ink);color:var(--bone)}
  .vitr-btn:disabled{opacity:.35;cursor:default}
  .vitr-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
             -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .vitr-rail::-webkit-scrollbar{display:none}
  /* peek : la carte suivante DÉPASSE, sinon rien ne signale qu'on peut faire défiler */
  .vitr-card{flex:0 0 clamp(150px,20vw,190px);scroll-snap-align:start;text-decoration:none;color:inherit;
             background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px;
             display:flex;flex-direction:column;transition:border-color .2s var(--ease),transform .2s var(--ease)}
  .vitr-card:hover{border-color:var(--ink);transform:translateY(-2px)}
  .vitr-im{display:block;aspect-ratio:1;background:#EAE6DB;border-radius:8px;overflow:hidden;margin-bottom:8px}
  .vitr-im img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
  .vitr-b{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);font-weight:800}
  .vitr-n{font-size:12.5px;line-height:1.25;margin:2px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .vitr-p{font-family:var(--display);font-size:15px;margin-top:auto;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  /* Prix barré en vitrine : la remise doit se voir sur la carte, pas seulement sur la fiche. */
  .vitr-was{font-size:12.5px;opacity:.55;text-decoration:line-through}
  .vitr-tag{font-family:var(--sans,inherit);font-size:11px;font-weight:700;letter-spacing:.02em;
            background:var(--volt);color:#111;border-radius:3px;padding:1px 5px;transform:skewX(-8deg)}
  .vitr-now{font-weight:700}
  @media(max-width:860px){ .vitr-nav{display:none} .vitr{margin:16px 0 4px} }

  /* ═══ APERÇU RAPIDE — refonte du 19/08/2026 ═══════════════════════════════════
     Direction : un guichet, pas une mini-fiche. Deux colonnes, la grille de pointures
     compactée, une seule chose en volt (le bouton qui rapporte), et la fermeture rendue
     à sa vraie taille : une croix de 44 px.

     Mesuré avant : la grille de 21 pointures occupait ~370 px, soit 60 % du panneau.
     Plus de 2 400 fiches du catalogue ont 19 tailles ou plus — c'est le cas courant,
     pas l'exception. En 7 colonnes de 44 px, 21 chips tiennent en 3 rangées ≈ 148 px. */
  .qvmodal .qvbox{position:relative;background:var(--bone);border-radius:2px;padding:0;
    width:min(720px,calc(100vw - 32px));max-width:720px;
    box-shadow:0 24px 64px rgba(14,14,14,.35);overflow:hidden}
  .qvmodal .qv{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:stretch}
  /* L'ancienne règle impose aspect-ratio:1 : étirée sur la hauteur de la boîte, la
     colonne image devenait CARRÉE (497 px pour une colonne de 300) et recouvrait la
     colonne de droite — les pointures étaient visibles et inatteignables au clic.
     Vu le 19/08 avec elementFromPoint, qui renvoyait .qvim au centre des boutons. */
  .qvmodal .qvim{aspect-ratio:auto;width:100%;min-width:0;border:none;border-radius:0;
    background:#fff;min-height:300px;background-size:contain;background-repeat:no-repeat;
    background-position:center;border-right:1px solid var(--line)}
  .qvmodal .qvinfo{padding:32px;display:flex;flex-direction:column;gap:0}
  .qvmodal .kicker{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ash);margin:0 0 4px}
  .qvmodal h3{font-family:var(--display);font-size:24px;line-height:1.05;letter-spacing:-.01em;
    text-transform:uppercase;margin:0 0 16px;color:var(--ink)}
  /* LE PRIX — notre chiffre est le plus gros de la fenêtre, plus gros que le nom.
     La date n'est pas un détail : c'est elle qui fait d'une allégation un fait. */
  .qvmodal .qvprix{margin:0 0 24px}
  .qvmodal .qvp1{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0}
  .qvmodal .pnow{font-family:var(--display);font-size:34px;line-height:1;color:var(--ink);
    font-variant-numeric:tabular-nums}
  .qvmodal .pwas{font-size:15px;color:var(--red);text-decoration:none;position:relative;
    font-variant-numeric:tabular-nums}
  .qvmodal .pwas:empty{display:none}
  /* trait dédié, jamais `line-through` : la barre d'un ancêtre traverse les enfants */
  .qvmodal .pwas::after{content:"";position:absolute;left:-1px;right:-1px;top:52%;height:1.5px;background:var(--red)}
  .qvmodal .qveco{font-size:13px;font-weight:500;color:var(--eco);margin:6px 0 0}
  .qvmodal .qveco:empty{display:none}
  .qvmodal .qvdate{font-size:12px;color:var(--ash);margin:4px 0 0}
  .qvmodal .qvdate:empty{display:none}
  .qvmodal .qvlab{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ash);margin:0 0 8px}
  /* LA GRILLE — 7 colonnes, chips de 44 px. Aucune pointure n'est cachée. */
  .qvmodal .qvrow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:0 0 24px}
  .qvmodal .qvrow button{min-height:44px;padding:0 4px;border:1px solid rgba(14,14,14,.25);
    border-radius:2px;background:var(--bone);color:var(--ink);font-family:var(--body);
    font-size:14px;font-weight:500;cursor:pointer;font-variant-numeric:tabular-nums;
    transition:border-color .14s var(--ease),background .14s var(--ease),color .14s var(--ease)}
  .qvmodal .qvrow button:hover:not([disabled]){border-color:var(--ink)}
  .qvmodal .qvrow button:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
  .qvmodal .qvrow button[aria-pressed="true"],.qvmodal .qvrow button.on{
    background:var(--volt);border-color:var(--ink);color:var(--ink);font-weight:700}
  .qvmodal .qvrow button[disabled],.qvmodal .qvrow button[aria-disabled="true"]{
    color:rgba(14,14,14,.35);cursor:not-allowed;position:relative}
  .qvmodal .qvrow button[disabled]::after{content:"";position:absolute;inset:0;
    background:linear-gradient(to top right,transparent 47%,rgba(14,14,14,.3) 47% 53%,transparent 53%)}
  /* LE BOUTON — deux états VIVANTS, jamais gris. Un CTA mort apprend qu'on peut l'ignorer. */
  .qvmodal .qvcta{width:100%;min-height:52px;border:none;border-radius:2px;cursor:pointer;
    font-family:var(--display);font-size:16px;letter-spacing:.03em;text-transform:uppercase;
    background:var(--ink);color:var(--bone);margin:0 0 12px;
    transition:background .16s var(--ease),color .16s var(--ease)}
  .qvmodal .qvcta[data-etat="prete"]{background:var(--volt);color:var(--ink)}
  .qvmodal .qvcta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
  .qvmodal .glink{display:block;text-align:center;font-size:14px;color:var(--ink);text-decoration:underline}
  /* LA CROIX — 44 px, la seule surface accordée à la sortie. */
  .qvmodal .qvx{position:absolute;top:12px;right:12px;z-index:3;width:44px;height:44px;
    display:grid;place-items:center;border:none;background:transparent;color:var(--ink);
    cursor:pointer;border-radius:50%;transition:background .14s var(--ease)}
  .qvmodal .qvx:hover{background:rgba(14,14,14,.08)}
  .qvmodal .qvx:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  /* La pulsation quand on clique « Choisir une pointure » sans en avoir choisi : le
     bouton guide au lieu de bouder. */
  @keyframes qvpulse{0%,100%{box-shadow:0 0 0 0 rgba(200,255,0,0)}50%{box-shadow:0 0 0 4px rgba(200,255,0,.55)}}
  .qvmodal .qvrow.appel{animation:qvpulse .4s var(--ease)}
  @media(max-width:720px){
    .qvmodal .qv{grid-template-columns:1fr}
    .qvmodal .qvim{min-height:200px;border-right:none;border-bottom:1px solid var(--line)}
    .qvmodal .qvinfo{padding:22px}
    .qvmodal .qvrow{grid-template-columns:repeat(5,minmax(0,1fr))}
    .qvmodal h3{font-size:21px}
    .qvmodal .pnow{font-size:29px}
  }
  @media(prefers-reduced-motion:reduce){.qvmodal .qvrow.appel{animation:none}}

  /* ═══ APERÇU : LES ANGLES (19/08/2026) ════════════════════════════════════════
     80,4 % des fiches ont au moins 2 images, le cas courant est 4 ou 5. Le rail loge
     dans le blanc que `contain` produisait déjà : 70 % des visuels sont en ratio 1,158,
     soit 259 px de haut sur une colonne de 300 × 497 — 238 px perdus. Le rail en prend 68.
     Plafond à 5 vues : au-delà, une tuile « +N » renvoie à la fiche. Un aperçu qui pagine
     sa galerie a cessé d'être un aperçu. */
  .qvmodal .qvcol{display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--line);min-width:0}
  .qvmodal .qvcol .qvim{flex:1 1 auto;border-right:none}
  .qvmodal .qvrail{flex:0 0 auto;display:flex;justify-content:center;gap:8px;padding:0 12px 12px}
  .qvmodal .qvrail[hidden]{display:none}
  .qvmodal .qvrail button{width:44px;height:44px;padding:2px;border:1px solid #E5E1D8;border-radius:2px;
    background:#fff;cursor:pointer;overflow:hidden;flex:0 0 auto;
    transition:border-color .14s var(--ease)}
  .qvmodal .qvrail button img{width:100%;height:100%;object-fit:contain;display:block}
  .qvmodal .qvrail button[aria-selected="true"]{border:2px solid var(--ink);padding:1px}
  .qvmodal .qvrail button:hover{border-color:var(--ink)}
  .qvmodal .qvrail button:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
  /* la tuile « +N » : une porte vers la fiche, pas une vue de plus */
  .qvmodal .qvrail .qvplus{display:grid;place-items:center;font-family:var(--display);
    font-size:13px;color:var(--ink);background:var(--bone);border-color:var(--ink)}
  /* la grande vue : le clic ouvre la fiche — c'est la porte « j'en veux plus » */
  .qvmodal .qvim{cursor:zoom-in}
  @media(max-width:720px){
    .qvmodal .qvcol{border-right:none;border-bottom:1px solid var(--line)}
    .qvmodal .qvrail{padding:0 12px 10px}
  }

/* Pager numéroté des listes (2026-08-23).
   Sans style, les 6 entrées s'empilaient sur 149 px de haut. En ligne : ~44 px.
   Couleurs en currentColor : suit le thème clair/sombre sans le dupliquer. */
.plppager{margin:1.5rem 0 0}
.plppager ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;list-style:none;margin:0;padding:0}
.plppager li{margin:0}
.plppager a,.plppager span{display:block;min-width:2.6rem;padding:.55rem .7rem;text-align:center;line-height:1;
  border:1px solid currentColor;border-radius:.4rem;text-decoration:none;font-size:14px}
.plppager span.dots{border-color:transparent;opacity:.6}
.plppager span.current{font-weight:700;opacity:.55}
.plppager a:hover,.plppager a:focus{text-decoration:underline}

/* Ligne de faits en tête de rayon (inc/plp-faits.php) : c'est le texte que l'index de
   ChatGPT retient. Discrète à l'œil, mais du VRAI texte — jamais masquée, jamais en
   display:none : un contenu invisible au client n'a rien à faire dans un index. */
.plpfaits{
  margin:.35rem 0 .6rem;
  font-size:.82rem;
  line-height:1.45;
  color:var(--ash,#6b6b6b);
  max-width:62ch;
}