/* =========================================================
   filters.css — Filtre du portail « Direction B » (rail latéral)
   Composant partagé : pages catégorie + comparateur.
   Piloté par filters.js. Mobile → volet coulissant « Filtrer ».
   ========================================================= */
/* Les couleurs et polices ne sont plus locales : elles pointent sur le socle
   (theme-v21.css). Le filtre des pages catégories et la colonne de l'accueil
   partagent ainsi exactement la même matière — un seul endroit à changer. */
.pf{
  --pf-ink:var(--ink,#1C1C1C); --pf-ink2:var(--ink2,#3A3A3A); --pf-mid:var(--mid,#6B615C); --pf-soft:var(--soft,#7D726D);
  --pf-b:var(--b,#E8E1DD); --pf-b2:var(--b2,#DDD0C8); --pf-bg2:var(--bg2,#FAF7F5);
  --pf-coral:var(--coral,#E07B65); --pf-coral-d:var(--coral-d,#C05848); --pf-coral-l:var(--coral-l,#ECA090); --pf-coral-xl:var(--coral-xl,#FDF0EC);
  --pf-fd:var(--font-display,Georgia,serif);
  --pf-shadow:0 8px 30px rgba(28,28,28,.10); --pf-shadow-sm:0 2px 8px rgba(28,28,28,.06);
  max-width:1240px;margin:24px auto 0;padding:0 clamp(16px,3vw,34px);
  display:grid;grid-template-columns:236px 1fr;gap:clamp(20px,3vw,34px);align-items:start;
}
/* La colonne se cale sous l'en-tête partagé, qui publie sa hauteur en --hdr. */
.pf-rail{top:calc(var(--hdr,72px) + 16px)!important;max-height:calc(100vh - var(--hdr,72px) - 40px)!important}
@media(max-width:1000px){.pf{grid-template-columns:1fr}}
.pf *{box-sizing:border-box;}
.pf [hidden]{display:none !important;}

/* ---------- desktop rail ---------- */
.pf-rail{position:sticky;top:calc(var(--topbar-h,64px) + 16px);align-self:start;
  max-height:calc(100vh - var(--topbar-h,64px) - 40px);overflow-y:auto;padding-right:4px;}
.pf-rail-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-bottom:13px;border-bottom:1px solid var(--pf-b);margin-bottom:4px;}
.pf-rail-head span{font-size:13px;color:var(--pf-mid);}
.pf-rail-head b{font-family:var(--pf-fd);color:var(--pf-ink);font-weight:500;font-size:16px;}
.pf-clear{background:none;border:0;color:var(--pf-coral-d);font-size:12.5px;font-weight:600;
  text-decoration:underline;text-underline-offset:2px;padding:3px;cursor:pointer;font-family:inherit;}
.pf-clear:hover{color:var(--pf-coral);}

.pf-grp{padding:16px 0;border-bottom:1px solid var(--pf-b);}
.pf-grp:last-child{border-bottom:0;}
.pf-grp h4{font-family:inherit;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--pf-mid);font-weight:700;margin:0 0 11px;}

.pf-sort{display:flex;flex-direction:column;gap:3px;}
.pf-ropt{text-align:left;border:0;background:transparent;color:var(--pf-ink2);font-size:13.5px;
  font-weight:500;padding:8px 11px;border-radius:9px;transition:.14s;cursor:pointer;font-family:inherit;}
.pf-ropt:hover{background:var(--pf-bg2);}
.pf-ropt.on{background:var(--pf-coral-xl);color:var(--pf-coral-d);font-weight:600;}

.pf-checks,.pf-radios{display:flex;flex-direction:column;gap:1px;}
.pf-check,.pf-radio{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;
  font-size:13.5px;color:var(--pf-ink2);cursor:pointer;}
.pf-check:hover,.pf-radio:hover{background:var(--pf-bg2);}
.pf-check input,.pf-radio input{width:16px;height:16px;accent-color:var(--pf-coral);margin:0;flex:0 0 auto;}
.pf-check .pf-cnt{margin-left:auto;font-size:11.5px;color:var(--pf-soft);}
.pf-toggle{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;
  font-size:13.5px;color:var(--pf-ink2);cursor:pointer;}
.pf-toggle:hover{background:var(--pf-bg2);}
.pf-toggle input{width:16px;height:16px;accent-color:var(--pf-coral);margin:0;}

/* ---------- age chips (rail) ---------- */
.pf-chips{display:flex;flex-wrap:wrap;gap:7px;}
.pf-rail .pf-chips .pf-sopt{border:1.5px solid var(--pf-b);background:#fff;border-radius:999px;
  padding:7px 12px;font-size:12.5px;color:var(--pf-ink2);font-weight:500;cursor:pointer;
  font-family:inherit;transition:.14s;}
.pf-rail .pf-chips .pf-sopt:hover{border-color:var(--pf-coral-l);}
.pf-rail .pf-chips .pf-sopt.on{background:var(--pf-ink);color:#fff;border-color:var(--pf-ink);}

/* ---------- budget slider ---------- */
.pf-slider{padding:2px 2px 0;}
.pf-slider input[type=range]{width:100%;accent-color:var(--pf-coral);cursor:pointer;height:22px;}
.pf-slider-val{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:12px;color:var(--pf-soft);margin-top:6px;}
.pf-slider-val b{font-family:var(--pf-fd);color:var(--pf-coral-d);font-weight:500;font-size:16px;}

/* ---------- results column ---------- */
.pf-resbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:6px;}
.pf-resbar .pf-rescount{font-size:13.5px;color:var(--pf-mid);}
.pf-resbar .pf-rescount b{font-family:var(--pf-fd);color:var(--pf-ink);font-weight:500;font-size:17px;}
.pf-active{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 0;}
.pf-active:empty{display:none;}
.pf-achip{display:inline-flex;align-items:center;gap:7px;background:var(--pf-coral-xl);
  border:1px solid #F3D9D0;color:var(--pf-coral-d);border-radius:999px;
  padding:5px 6px 5px 12px;font-size:12.5px;font-weight:600;}
.pf-achip button{border:0;background:#fff;color:var(--pf-coral-d);width:18px;height:18px;
  border-radius:50%;display:grid;place-items:center;font-size:11px;line-height:1;cursor:pointer;font-family:inherit;}
.pf-achip button:hover{background:var(--pf-coral);color:#fff;}
.pf-grid{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;}
@media (max-width:520px){ .pf-grid{grid-template-columns:1fr 1fr;gap:12px;} }
.pf-empty{text-align:center;padding:48px 20px;color:var(--pf-mid);background:var(--pf-bg2);
  border-radius:16px;border:1px dashed var(--pf-b);}

/* ---------- load more ---------- */
.pf-more-wrap{text-align:center;margin-top:30px;}
.pf-more-wrap:has(.pf-more[hidden]){display:none;}
.pf-more{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--pf-b2);
  color:var(--pf-ink);border-radius:999px;padding:14px 30px;font-size:14.5px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:.16s;}
.pf-more:hover{border-color:var(--pf-coral);color:var(--pf-coral-d);background:var(--pf-coral-xl);}
.pf-more-cnt{color:var(--pf-soft);font-weight:500;font-size:13px;}

/* ---------- mobile control bar (hidden on desktop) ---------- */
.pf-mbar{display:none;}

@media (max-width:860px){
  .pf{grid-template-columns:1fr;gap:0;}
  .pf-rail{display:none;}
  .pf-mbar{display:flex;gap:10px;position:sticky;top:var(--topbar-h,64px);z-index:20;
    padding:12px 0;margin-bottom:4px;background:var(--bg,#fff);}
  .pf-mbar button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border-radius:999px;border:1.5px solid var(--pf-b);background:#fff;color:var(--pf-ink);
    font-size:13.5px;font-weight:600;padding:12px;font-family:inherit;cursor:pointer;}
  .pf-mbar .pf-mfilter{background:var(--pf-ink);color:#fff;border-color:var(--pf-ink);}
  .pf-mbar .pf-mcnt{background:var(--pf-coral);color:#fff;font-size:11px;min-width:18px;height:18px;
    border-radius:999px;display:inline-grid;place-items:center;padding:0 5px;}
}

/* ---------- mobile bottom sheet ---------- */
.pf-scrim{position:fixed;inset:0;background:rgba(28,28,28,.42);opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:1000;}
.pf-scrim.show{opacity:1;pointer-events:auto;}
.pf-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;
  z-index:1001;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  max-height:90vh;display:flex;flex-direction:column;
  --pf-ink:#1C1C1C;--pf-ink2:#3A3A3A;--pf-mid:#7A7068;--pf-soft:#B8AFA8;--pf-b:#ECDDD8;--pf-b2:#DDD0C8;
  --pf-bg2:#F7F5F4;--pf-coral:#E07B65;--pf-coral-d:#C05848;--pf-coral-xl:#FDF0EC;--pf-fd:'Fraunces',Georgia,serif;}
.pf-sheet.show{transform:translateY(0);}
.pf-grab{width:40px;height:4px;border-radius:2px;background:var(--pf-b2);margin:11px auto 4px;}
.pf-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:6px 20px 13px;border-bottom:1px solid var(--pf-b);}
.pf-sheet-head h3{margin:0;font-family:var(--pf-fd);font-weight:500;font-size:19px;color:var(--pf-ink);}
.pf-sheet-head .pf-clear{font-size:13px;}
.pf-sheet-body{padding:4px 20px 14px;overflow-y:auto;}
.pf-sheet-grp{padding:15px 0;border-bottom:1px solid var(--pf-b);}
.pf-sheet-grp:last-child{border-bottom:0;}
.pf-sheet-grp h4{margin:0 0 11px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--pf-mid);font-weight:700;font-family:inherit;}
.pf-opts{display:flex;flex-wrap:wrap;gap:9px;}
.pf-sopt{border:1.5px solid var(--pf-b);background:#fff;border-radius:999px;padding:9px 15px;
  font-size:13px;color:var(--pf-ink2);font-weight:500;cursor:pointer;font-family:inherit;transition:.14s;}
.pf-sopt:hover{border-color:var(--pf-coral-l);}
.pf-sopt.on{background:var(--pf-ink);color:#fff;border-color:var(--pf-ink);}
.pf-sheet-foot{padding:14px 20px;border-top:1px solid var(--pf-b);background:#fff;}
.pf-apply{width:100%;background:var(--pf-coral);color:#fff;border:0;border-radius:11px;padding:15px;
  font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:.14s;}
.pf-apply:hover{background:var(--pf-coral-d);}
@media (min-width:861px){ .pf-scrim,.pf-sheet{display:none;} }