/* ═══════════════════════════════════════════════════════════
   CHRONOLOGEEK — Panneau de filtres
   Remplace la legende et la barre de filtres par un seul bloc.
   Les boutons d'origine (.fbt) sont DEPLACES dedans, pas recrees :
   ils gardent leur id, leur onclick et leur classe .active, donc
   la logique de filtrage des pages n'est pas touchee.
   Tout est scope sous .fp — le Dossier utilise deja .chip/.chips.
   ═══════════════════════════════════════════════════════════ */

.fp{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);
  margin-bottom:1.5rem;overflow:hidden}

/* ── en-tete ──────────────────────────────────────────────── */
.fp-head{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.15rem;
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.fp-title{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.fp-hint{font-size:.72rem;color:var(--muted);margin-left:auto;display:flex;
  align-items:center;gap:.35rem}
.fp-hint svg{width:13px;height:13px;stroke:var(--tl-color,var(--accent));fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.fp-count{font-size:.72rem;font-weight:600;color:var(--tl-color,var(--accent));
  white-space:nowrap;font-variant-numeric:tabular-nums}

.fp-body{padding:.35rem 1.15rem 1rem}

/* ── une section = un groupe de cases ─────────────────────── */
.fp-sec{padding:.85rem 0;border-bottom:1px solid var(--border)}
.fp-sec:last-child{border-bottom:none;padding-bottom:.2rem}
.fp-sec-head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.6rem}
.fp-sec-lab{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted2)}
.fp-bulk{margin-left:auto;display:flex;gap:.3rem}
.fp-bulk button{background:none;border:none;color:var(--muted);font-family:inherit;
  font-size:.68rem;cursor:pointer;padding:.1rem .35rem;border-radius:4px;
  text-decoration:underline;text-decoration-color:var(--border2);text-underline-offset:3px}
.fp-bulk button:hover{color:var(--tl-color,var(--accent))}
.fp-bulk button:focus-visible{outline:2px solid var(--tl-color,var(--accent));outline-offset:1px}

.fp-row{display:flex;flex-wrap:wrap;gap:.4rem}

/* ── les boutons d'origine, re-habilles en cases a cocher ─── */
.fp .fbt,.fp .chip{display:inline-flex;align-items:center;gap:.45rem;background:var(--surface2);
  border:1px solid var(--border2);color:var(--muted2);border-radius:8px;
  padding:.4rem .7rem .4rem .5rem;font-size:.76rem;font-weight:500;font-family:inherit;
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:border-color .16s,color .16s,background .16s}
.fp .fbt .fp-box,.fp .chip .fp-box{width:15px;height:15px;flex:0 0 auto;border-radius:4px;
  border:2px solid #7e7ea8;box-shadow:0 0 0 1px rgba(126,126,168,.25);
  display:flex;align-items:center;justify-content:center;transition:all .16s}
.fp .fbt .fp-box svg,.fp .chip .fp-box svg{width:10px;height:10px;stroke:#08080f;fill:none;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .12s}
.fp .fbt .fp-dot,.fp .chip .fp-dot{width:8px;height:8px;border-radius:2px;flex:0 0 auto}

/* coche */
.fp .fbt.active,.fp .chip.on{color:var(--text);background:var(--surface2);
  border-color:var(--border2)}
.fp .fbt.active .fp-box,.fp .chip.on .fp-box{background:var(--ck,var(--tl-color,var(--accent)));
  border-color:var(--ck,var(--tl-color,var(--accent)));box-shadow:none}
.fp .fbt.active .fp-box svg,.fp .chip.on .fp-box svg{opacity:1}
/* decoche : case vide, libelle barre */
.fp .fbt:not(.active),.fp .chip:not(.on){background:transparent;color:var(--muted);border-color:var(--border)}
.fp .fbt:not(.active) .fp-txt,.fp .chip:not(.on) .fp-txt{text-decoration:line-through;
  text-decoration-color:var(--muted);text-decoration-thickness:1px}
.fp .fbt:not(.active) .fp-dot,.fp .chip:not(.on) .fp-dot{opacity:.35}
.fp .fbt:hover,.fp .chip:hover{border-color:var(--ck,var(--tl-color,var(--accent)))}
.fp .fbt:focus-visible,.fp .chip:focus-visible{outline:2px solid var(--tl-color,var(--accent));outline-offset:2px}

/* ── bande des reperes non filtrables ─────────────────────── */
.fp-marks{display:flex;flex-wrap:wrap;gap:.4rem .55rem;align-items:center;
  padding:.75rem 1.15rem;background:var(--surface2);border-top:1px solid var(--border)}
.fp-marks-lab{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-right:.15rem}
.fp-marks>span:not(.fp-marks-lab){font-size:.68rem}

/* la barre d'origine disparait, ses boutons vivent dans le panneau */
.fp-source{display:none !important}

@media (prefers-reduced-motion:reduce){
  .fp .fbt,.fp .fbt .fp-box,.fp .fbt .fp-box svg,.fp .chip .fp-box svg{transition:none}
}

@media(max-width:620px){
  .fp-head{gap:.35rem .6rem;padding:.75rem .9rem}
  .fp-hint{margin-left:0;width:100%;font-size:.68rem}
  .fp-body{padding:.25rem .9rem .85rem}
  .fp .fbt,.fp .chip{font-size:.72rem;padding:.38rem .6rem .38rem .45rem;gap:.4rem}
  .fp-marks{padding:.65rem .9rem}
}