/* Conteneur : .cap-plp et non .cap-cat.
   mu-plugins/cap-mega-menu.php définit déjà .cap-cat pour ses liens de
   catégorie, avec display:flex — et sa feuille est chargée APRÈS la nôtre.
   Notre <main> devenait donc un conteneur flex et toute la page se
   disposait en colonnes côte à côte. */
:root{--pink:#E8527A;--pink-dark:#C4355A;--pink-hot:#E91E8C;--pink-deep:#C8187A;
 --pink-soft:#FFBCD9;--pink-pale:#FFF5FB;--pink-line:#FDE0EA;--ink:#171717;--grey:#666;
 --grey-light:#F5F5F5;--star:#F4B400;--green:#1E9E5E;
 --display:'Red Hat Display',Arial,sans-serif;--body:'Roboto',Arial,sans-serif}

.cap-plp{font-family:var(--body);color:var(--ink);background:#fff;font-size:16px;line-height:1.55}
.cap-plp *,.cap-plp *::before,.cap-plp *::after{box-sizing:border-box}
.cap-plp img{max-width:100%;display:block}
.cap-plp a{color:inherit}
.cap-plp h1,.cap-plp h2,.cap-plp h3,.cap-plp h4{font-family:var(--display);font-weight:800;line-height:1.15;margin:0}
.cap-plp h2{font-size:clamp(1.4rem,3vw,2rem)}
.cap-plp h3{font-size:1.1rem;font-weight:700}
.cap-plp p{margin:0}
.cap-plp .wrap{width:min(1200px,calc(100% - 40px));margin-inline:auto}
.cap-plp section{padding:48px 0}
.cap-plp .center{text-align:center}
@media (max-width:720px){.cap-plp section{padding:34px 0}.cap-plp .wrap{width:calc(100% - 28px)}}

.cap-plp .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);
 font-weight:800;font-size:.95rem;letter-spacing:.03em;text-transform:uppercase;padding:14px 28px;border-radius:8px;
 border:0;background:var(--pink);color:#fff;text-decoration:none;cursor:pointer}
.cap-plp .btn:hover{background:var(--pink-dark)}
.cap-plp .btn-full{width:100%}

/* En-tête de catégorie */
.cap-plp .crumb{font-size:.8rem;color:#999;padding-top:18px}
.cap-plp .crumb a{text-decoration:none}
.cap-plp .crumb a:hover{color:var(--pink)}
.cap-plp .plp-head{display:grid;grid-template-columns:1fr auto;gap:12px 32px;align-items:end;padding:10px 0 4px}
.cap-plp .plp-head h1{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.cap-plp .plp-head .intro{grid-column:1;color:var(--grey);max-width:62ch;font-size:.95rem}
.cap-plp .plp-meta{grid-row:1/3;grid-column:2;text-align:right;font-size:.85rem;color:var(--grey)}
.cap-plp .plp-meta b{display:block;font-family:var(--display);font-size:1.6rem;color:var(--ink)}
.cap-plp .plp-meta .st{color:var(--star);letter-spacing:1px}
@media (max-width:720px){.cap-plp .plp-head{grid-template-columns:1fr}
 .cap-plp .plp-meta{grid-row:auto;grid-column:1;text-align:left;display:flex;gap:10px;align-items:center}
 .cap-plp .plp-meta b{display:inline;font-size:1rem}.cap-plp .plp-head .intro{font-size:.88rem}}
.cap-plp .note4{background:var(--pink-pale);border:1px solid #F3B8DA;color:#8A1157;border-radius:10px;
 padding:10px 14px;font-size:.9rem;text-align:center;margin:14px 0 4px}
.cap-plp .note4 b{color:var(--pink-deep)}
.cap-plp .note4 bdi,.cap-plp .note4 .woocommerce-Price-amount{font-weight:800}

/* Bulles de catégories sœurs */
.cap-plp .plp-subs{padding:18px 0 6px}
.cap-plp .cats{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none;flex-wrap:nowrap}
.cap-plp .cats::-webkit-scrollbar{display:none}
.cap-plp .cat{flex:0 0 auto;text-align:center;text-decoration:none;width:92px}
.cap-plp .cat img{width:76px;height:76px;border-radius:50%;object-fit:cover;margin:0 auto 8px;
 border:3px solid var(--pink-line);transition:border-color .15s,transform .15s}
.cap-plp .cat:hover img{border-color:var(--pink);transform:translateY(-3px)}
.cap-plp .cat span{font-family:var(--display);font-weight:700;font-size:.8rem;color:#4a4a4a;line-height:1.2;display:block}

/* Barre de filtres collante, sous l'en-tête */
.cap-plp .bar{position:sticky;top:78px;z-index:40;background:#fff;border-bottom:1px solid var(--pink-line);padding:10px 0}
@media (max-width:1024px){.cap-plp .bar{top:64px}}
.cap-plp .bar-in{display:flex;align-items:center;gap:10px}
.cap-plp .chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1}
.cap-plp .chips::-webkit-scrollbar{display:none}
.cap-plp .chip{flex:0 0 auto;border:1.5px solid var(--pink-line);background:#fff;border-radius:999px;
 padding:7px 14px;font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--ink);text-decoration:none}
.cap-plp .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cap-plp .fbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--ink);
 background:#fff;border-radius:8px;padding:7px 14px;font-family:var(--display);font-weight:800;font-size:.85rem;cursor:pointer}
.cap-plp .fbtn .n{background:var(--pink);color:#fff;border-radius:999px;font-size:.7rem;padding:1px 7px;display:none}
.cap-plp .fbtn .n.on{display:inline}
.cap-plp .sort{flex:0 0 auto;border:1.5px solid var(--pink-line);border-radius:8px;padding:8px 10px;
 font:inherit;font-size:.85rem;background:#fff}
.cap-plp .count{font-size:.85rem;color:var(--grey);margin:14px 0 0}

/* Colonne filtres / feuille mobile */
.cap-plp .plp{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start}
.cap-plp .plp .grid{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (min-width:1180px){.cap-plp .plp .grid{grid-template-columns:repeat(4,1fr)}}
.cap-plp .side{position:sticky;top:150px;padding-top:14px}
.cap-plp .side h4{font-family:var(--display);font-weight:800;font-size:.95rem;margin:0 0 12px}
.cap-plp .csws{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
.cap-plp .csw{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:.85rem;
 text-align:left;border-radius:6px;text-decoration:none}
.cap-plp .csw i{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px #ddd;flex:0 0 auto}
.cap-plp .csw small{color:#aaa;font-weight:400}
.cap-plp .csw[aria-pressed="true"] i{box-shadow:0 0 0 2.5px var(--pink)}
.cap-plp .csw[aria-pressed="true"] span{color:var(--pink);font-weight:700}
.cap-plp .side .reset{display:inline-block;margin-top:14px;color:var(--pink);font-weight:700;font-size:.85rem;text-decoration:underline}
.cap-plp .sheet-top,.cap-plp .sheet-go,.backdrop{display:none}
@media (max-width:900px){
 .cap-plp .plp{grid-template-columns:1fr}
 .cap-plp .plp .grid{grid-template-columns:repeat(2,1fr);gap:12px}
 .cap-plp .side{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:1000000;background:#fff;
  border-radius:18px 18px 0 0;padding:14px 18px calc(18px + env(safe-area-inset-bottom,0px));max-height:78vh;
  overflow-y:auto;transform:translateY(105%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:0 -6px 30px rgba(0,0,0,.18)}
 body.sheet-open .cap-plp .side{transform:none}
 .cap-plp .sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
 .cap-plp .sheet-top b{font-family:var(--display);font-size:1.1rem}
 .cap-plp .sheet-top button{background:none;border:0;font-size:1.6rem;cursor:pointer;line-height:1}
 .cap-plp .csws{grid-template-columns:repeat(4,1fr);gap:12px 6px}
 .cap-plp .csw{flex-direction:column;gap:4px;font-size:.72rem;text-align:center}
 .cap-plp .csw i{width:36px;height:36px}
 .cap-plp .sheet-go{display:block;margin-top:18px}
 .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:999999}
 body.sheet-open .backdrop{display:block}
 .cap-plp .sort{display:none}
}
@media (min-width:901px){.cap-plp .fbtn{display:none}}

/* Cartes produit — même rendu que la page d'accueil */
.cap-plp .card{background:#fff;border:1px solid var(--pink-line);border-radius:12px;overflow:hidden;
 display:flex;flex-direction:column;position:relative;transition:box-shadow .2s,transform .2s}
.cap-plp .card:hover{box-shadow:0 8px 24px rgba(232,82,122,.18);transform:translateY(-3px)}
.cap-plp .card .off{position:absolute;top:10px;left:10px;background:var(--pink-hot);color:#fff;
 font-family:var(--display);font-weight:800;font-size:.78rem;padding:5px 9px;border-radius:6px;z-index:2}
.cap-plp .card img{aspect-ratio:1;width:100%;object-fit:cover}
.cap-plp .card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.cap-plp .card-body h3{font-size:.95rem;line-height:1.3}
.cap-plp .card-body h3 a{text-decoration:none}
.cap-plp .card .stars{color:var(--star);font-size:.8rem;letter-spacing:1px}
.cap-plp .price{font-family:var(--display);font-weight:900;font-size:1.15rem;color:var(--pink);margin-top:2px;
 display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.cap-plp .price bdi,.cap-plp .price .woocommerce-Price-amount{font-family:var(--display);font-weight:900;color:var(--pink)}
.cap-plp .price s,.cap-plp .price s bdi,.cap-plp .price del bdi{color:#999;font-size:.9rem;font-weight:500}
.cap-plp .price del,.cap-plp .price ins{text-decoration:none}
.cap-plp .price del bdi{text-decoration:line-through}
.cap-plp .add{margin-top:auto;font-family:var(--display);font-weight:800;font-size:.82rem;background:var(--pink);
 color:#fff;border-radius:6px;padding:10px 12px;text-align:center;text-decoration:none;display:block}
.cap-plp .add:hover{background:var(--pink-dark)}
.cap-plp .add-off{background:#bbb}
.cap-plp .cap-dlv{display:block;text-align:center;font-size:.72rem;color:var(--green);margin-top:6px}
.cap-plp .cap-dlv:empty{display:none}
.cap-plp .empty{grid-column:1/-1;text-align:center;padding:40px 10px;color:var(--grey)}

/* Tuile personnalisation */
.cap-plp .perso-tile{background:var(--pink-pale);border-color:#F3B8DA}
.cap-plp .pt-img{position:relative;aspect-ratio:1;background:#fff}
.cap-plp .pt-img img{height:100%;object-fit:contain;padding:8px}
.cap-plp .pt-word{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-10deg);
 font-family:"CAP Franklin",var(--display);font-weight:800;color:#fff;font-size:clamp(.8rem,2.2vw,1.2rem);
 white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none;max-width:70%;overflow:hidden;text-overflow:ellipsis}
.cap-plp .pt-sub{font-size:.8rem;color:var(--grey);margin:2px 0 8px}
.cap-plp .pt-form input[name=texte]{width:100%;border:1.5px solid #F3B8DA;border-radius:6px;padding:8px 10px;
 font:inherit;font-size:.85rem;margin-bottom:8px;background:#fff}
.cap-plp .pt-form .add{width:100%;border:0;cursor:pointer}

/* Pagination */
.cap-plp .more{text-align:center;margin:30px 0 8px}
.cap-plp .more .prog{font-size:.85rem;color:var(--grey);margin-bottom:8px}
.cap-plp .more .bar2{width:220px;height:4px;background:var(--pink-line);border-radius:2px;margin:0 auto 14px;overflow:hidden}
.cap-plp .more .bar2 i{display:block;height:100%;background:var(--pink)}
.cap-plp .more ul.page-numbers{list-style:none;display:flex;justify-content:center;gap:6px;padding:0;margin:14px 0 0;flex-wrap:wrap;font-size:.85rem}
.cap-plp .more .page-numbers{min-width:32px;padding:5px 9px;border-radius:6px;text-decoration:none;display:inline-block;text-align:center}
.cap-plp .more .page-numbers.current{background:var(--ink);color:#fff}
.cap-plp .more a.page-numbers:hover{background:var(--pink-pale)}

/* Renvois et réassurance */
.cap-plp .cross{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.cap-plp .cross a{display:flex;align-items:center;gap:14px;border:1px solid var(--pink-line);border-radius:12px;
 padding:12px;text-decoration:none;font-family:var(--display);font-weight:800}
.cap-plp .cross img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.cap-plp .cross small{display:block;font-family:var(--body);font-weight:400;color:var(--grey);font-size:.8rem}
@media (max-width:720px){.cap-plp .cross{grid-template-columns:1fr}}
.cap-plp .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:800px){.cap-plp .trust{grid-template-columns:repeat(2,1fr)}}
.cap-plp .trust>div{text-align:center;background:#fff;border:1px solid var(--pink-line);border-radius:14px;padding:22px 14px}
.cap-plp .trust .ico{font-size:1.9rem;margin-bottom:8px}
.cap-plp .trust b{display:block;font-family:var(--display);font-weight:800;font-size:.95rem}
.cap-plp .trust p{color:var(--grey);font-size:.85rem;margin-top:3px}

/* Texte SEO (description de la catégorie) */
.cap-plp .seo-sec{padding-top:10px}
.cap-plp .seo{background:var(--grey-light);border-radius:20px;padding:28px 30px;position:relative}
.cap-plp .seo h2{font-size:1.4rem;margin:22px 0 8px}
.cap-plp .seo h2:first-child{margin-top:0}
.cap-plp .seo h3{margin:16px 0 6px}
.cap-plp .seo p{color:#444;margin:0 0 10px;max-width:75ch}
.cap-plp .seo a{color:var(--pink);font-weight:600}
.cap-plp .seo.collapsed{max-height:320px;overflow:hidden}
.cap-plp .seo.collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;
 background:linear-gradient(rgba(245,245,245,0),var(--grey-light));border-radius:0 0 20px 20px}
.cap-plp .seo-toggle{display:block;margin:14px auto 0;background:var(--ink);color:#fff;border:0;border-radius:999px;
 padding:10px 20px;font-family:var(--display);font-weight:700;cursor:pointer}

/* ── Anti-débordement horizontal ──────────────────────────────────────
   La rangée de bulles défile à l'intérieur de son cadre ; sans ces
   garde-fous elle élargissait la page entière et décalait tout le contenu. */
.cap-plp{overflow-x:clip;max-width:100vw}
.cap-plp .plp-subs{min-width:0;max-width:100%;overflow:hidden}
.cap-plp .cats{min-width:0;max-width:100%}
.cap-plp .cat span{overflow-wrap:anywhere;hyphens:auto}
.cap-plp .plp,.cap-plp .plp>div{min-width:0}
.cap-plp .grid{min-width:0}
.cap-plp .chips{min-width:0}

/* ── Défilement infini ───────────────────────────────────────────────────
   La pagination reste dans le code pour Google mais quitte l'écran. On la
   sort du flux sans display:none ni visibility:hidden : ces deux-là sont
   traités comme du contenu dissimulé par les robots, alors qu'un
   déplacement hors cadre reste lisible pour eux. */
.cap-plp .more .pager-seo{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
}

.cap-plp .more .more-btn{
  display:inline-block;
  margin-top:4px;
  padding:12px 28px;
  border-radius:999px;
  font-size:.92rem;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  background:var(--ink);
  color:#fff;
  border:0;
  transition:background .18s ease,opacity .18s ease;
}
.cap-plp .more .more-btn:hover{background:var(--pink)}
.cap-plp .more .more-btn.chargement{opacity:.6;pointer-events:none}
.cap-plp .more .more-btn[hidden]{display:none}

.cap-plp .more .more-end{
  margin:10px 0 0;
  font-size:.85rem;
  color:var(--grey);
}
.cap-plp .more .more-end[hidden]{display:none}

/* La barre passe en douceur d'une valeur à l'autre, sauf si le visiteur a
   demandé à limiter les animations. */
.cap-plp .more .bar2 i{transition:width .35s ease}
@media (prefers-reduced-motion:reduce){
  .cap-plp .more .bar2 i{transition:none}
}