/* ---------------------------------------------------------------------------
   Panneau de filtres du catalogue (/videos).

   Couleurs reprises telles quelles du <style> de l'ancien index.php
   (#ff3399, #ff69b4, #1c1c1c…) : elles ne venaient d'aucun jeton du design
   system, d'où un rose légèrement différent de celui utilisé partout
   ailleurs sur le site. Reprise sur palette.css/design-system.css, et panneau
   plein écran sous 480px — jusqu'ici fixé à 300px, soit 80 % d'un petit
   téléphone, sans bouton de fermeture dédié (seul un nouveau tap sur le
   déclencheur, resté affiché derrière le panneau, le refermait).
   --------------------------------------------------------------------------- */

.filter-btn {
  display: none; /* caché par défaut */
  position: fixed;
  top: 15%;
  right: 0;
  background: var(--degrade-marque, #e8336d);
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: var(--r-md, 12px) 0 0 var(--r-md, 12px);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  transform: translateY(-50%);
  z-index: 1001;
  transition: background 0.3s, opacity 0.3s;
  opacity: 0;
}
.filter-btn.show {
  display: block;
  opacity: 1;
}
.filter-btn:hover { background: var(--degrade-marque-survol, #ff5c8d); }

.filter-panel ul li a.active-link {
    color: var(--rose-clair, #ff5c8d);
}

/* Panneau filtre */
.filter-panel {
  position: fixed;
  top: 0;
  right: -500px;
  width: 300px;
  height: 100%;
  background: var(--fond-1, #161315);
  border-left: 1px solid var(--bord, rgba(245, 240, 242, 0.1));
  box-shadow: var(--ombre-3, 0 18px 48px rgba(0, 0, 0, 0.55));
  padding: var(--e-5, 24px);
  transition: right 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
}
.filter-panel.open { right: 0; }

.filter-panel h3 {
  margin: var(--e-5, 24px) 0 var(--e-2, 8px);
  color: var(--rose-clair, #ff5c8d);
  font-family: var(--police-titre);
  font-size: var(--t-base, 1rem);
}
.filter-panel h3:first-child { margin-top: 0; }
.filter-panel ul { list-style: none; padding: 0; margin: 0; }
.filter-panel ul li { margin: 2px 0; }
.filter-panel ul li a {
  display: block;
  padding: var(--e-2, 8px) var(--e-2, 8px);
  border-radius: var(--r-sm, 6px);
  color: var(--texte, #f5f0f2);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.filter-panel ul li a:hover { background: var(--fond-2, #211c1f); color: var(--rose-clair, #ff5c8d); }

/* Bouton de fermeture dans le panneau lui-même : jusqu'ici, seul un nouveau
   tap sur le déclencheur (masqué sous le panneau ouvert sur petit écran)
   permettait de refermer — aucune cible visible dans le panneau. */
.filtre-fermer {
  position: absolute;
  top: var(--e-4, 16px);
  right: var(--e-4, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--bord-fort, rgba(245, 240, 242, 0.18));
  border-radius: var(--r-plein, 999px);
  background: var(--fond-2, #211c1f);
  color: var(--texte, #f5f0f2);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.filtre-fermer:hover { background: var(--fond-3, #2e282b); border-color: var(--rose, #e8336d); }
.filtre-fermer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .filter-btn {
    position: fixed;
    top: 12%;
    }
}

/* Plein écran sous 480px, à l'image du menu de navigation : un panneau à
   300px de large laisse à peine 75px visibles de la page sur un téléphone de
   375px, ce qui donnait l'impression d'un tiroir coincé plutôt que d'un vrai
   écran de filtres. */
@media (max-width: 480px) {
    .filter-panel {
        width: 100%;
        right: -100%;
        padding-top: var(--e-10, 64px);
    }
}

/* Ajouté au portage : le bouton de filtre est désormais un <button> et non un
   <div> — il était inaccessible au clavier. Il hérite donc du style natif des
   boutons, qu'il faut neutraliser. */
.filter-btn {
  border: none;
  font-family: inherit;
}