/* =============================================================
   filterMenu.css — Panneau de filtres opus déroulant
   Utilisé par tous les modes de jeu de Personadle.

   Structure HTML attendue :
     .filter-panel                 Conteneur global (position absolute)
     ├─ .filter-toggle-btn         Bouton Persona style (ouvre le panneau)
     └─ .filter-dropdown           Panneau déroulant (ferme par défaut)
          └─ .filter-group         Un groupe de jeu (P1, P2, P3…)
               ├─ .filter-main-btn  Bouton logo du jeu (expand ou direct)
               └─ .filter-sub-panel Sous-filtres par opus précis
                    └─ .filter-sub-btn  Bouton logo d'un opus spécifique
   ============================================================= */

/* =====================================================
   1. CONTENEUR GLOBAL
   Positionné en haut à gauche, par-dessus le contenu.
   ===================================================== */

.filter-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  user-select: none;
}

/* =====================================================
   2. BOUTON TOGGLE — Style Persona / Phantom Thieves
   Noir + rouge, gras, lettres espacées.
   État .open : lueur rouge renforcée + flèche retournée.
   ===================================================== */

.filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0d0d0d;
  color: #fff;
  border: 2px solid #cc0000;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}

.filter-toggle-btn:hover {
  background: #1a0000;
  border-color: #ff0033;
  box-shadow:
    0 0 16px rgba(255, 0, 50, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.6);
}

.filter-toggle-btn.open {
  background: #200000;
  border-color: #ff0033;
  box-shadow:
    0 0 20px rgba(255, 0, 50, 0.7),
    inset 0 0 10px rgba(255, 0, 50, 0.08);
}

/* Icône roue dentée */
.filter-toggle-icon {
  font-size: 14px;
  line-height: 1;
}

.filter-toggle-text {
  flex: 1;
}

/* Flèche — tourne 180° quand ouvert */
.filter-toggle-arrow {
  /* 9 px à 60 % d'opacité : on ne la voyait pas (retour Hamza du 2026-09-16). */
  font-size: 12px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.filter-toggle-btn.open .filter-toggle-arrow {
  transform: rotate(180deg);
}

/* =====================================================
   3. PANNEAU DÉROULANT
   Slide-down via max-height + opacity.
   Fond semi-transparent avec blur.
   ===================================================== */

.filter-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: rgba(6, 6, 14, 0.97);
  border: 1.5px solid rgba(200, 0, 50, 0.4);
  border-radius: 8px;

  /* Slide fermé */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 8px;
  pointer-events: none;

  transition:
    max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease,
    padding 0.3s ease;

  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
}

/* État ouvert — scrollable si contenu plus haut que 75% de la fenêtre */
.filter-dropdown.open {
  max-height: min(700px, 75vh);
  overflow-y: auto;
  opacity: 1;
  padding: 10px 8px;
  pointer-events: auto;
}

/* ── Scrollbar Persona (webkit) ─────────────────────── */
.filter-dropdown::-webkit-scrollbar {
  width: 4px;
}
.filter-dropdown::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
}
.filter-dropdown::-webkit-scrollbar-thumb {
  background: rgba(200, 0, 40, 0.55);
  border-radius: 2px;
}
.filter-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(220, 0, 50, 0.9);
}

/* Firefox */
.filter-dropdown {
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 0, 40, 0.55) rgba(255, 255, 255, 0.04);
}

/* =====================================================
   4. GROUPES DE FILTRES
   Chaque groupe correspond à un jeu (P1, P2, P3…).
   Séparateur léger entre les groupes.
   ===================================================== */

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}

/* Séparateur entre groupes */
.filter-group + .filter-group {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Label texte pour P2 (auto-expand, pas de logo principal) */
.filter-group-auto-label {
  font-size: 9px;
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  padding: 0 4px;
}

/* =====================================================
   5. BOUTON LOGO PRINCIPAL (par jeu)
   Cliquable pour expand/collapse les sous-filtres,
   ou filtre direct (P1, P5X).
   ===================================================== */

.filter-main-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 5px 9px;
  cursor: pointer;
  width: 100%;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

.filter-main-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.02);
}

/* Inactive : logo grisé */
.filter-main-btn:not(.active) .filter-logo {
  opacity: 0.35;
  filter: grayscale(65%);
}

/* Logo image */
.filter-logo {
  height: 68px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    filter 0.2s ease;
  display: block;
}

/* Flèche expand — ▸ tourne 90° quand ouvert */
.filter-expand-arrow {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  transition:
    transform 0.22s ease,
    color 0.18s ease;
  flex-shrink: 0;
  line-height: 1;
}

.filter-main-btn.expanded .filter-expand-arrow {
  transform: rotate(90deg);
  color: #fff;
}

/* ── Lueurs colorées pour chaque jeu (état active) ──── */

.filter-main-btn.active.filter-color-p1 {
  border-color: rgba(139, 0, 255, 0.55);
  box-shadow: 0 0 9px rgba(139, 0, 255, 0.35);
}
.filter-main-btn.active.filter-color-p2 {
  border-color: rgba(200, 60, 0, 0.55);
  box-shadow: 0 0 9px rgba(200, 60, 0, 0.3);
}
.filter-main-btn.active.filter-color-p3 {
  border-color: rgba(32, 131, 245, 0.6);
  box-shadow: 0 0 9px rgba(32, 131, 245, 0.35);
}
.filter-main-btn.active.filter-color-p4 {
  border-color: rgba(255, 215, 0, 0.65);
  box-shadow: 0 0 9px rgba(255, 215, 0, 0.35);
}
.filter-main-btn.active.filter-color-p5 {
  border-color: rgba(255, 65, 54, 0.6);
  box-shadow: 0 0 9px rgba(255, 65, 54, 0.35);
}
.filter-main-btn.active.filter-color-p5x {
  border-color: rgba(255, 0, 60, 0.7);
  box-shadow: 0 0 10px rgba(255, 0, 60, 0.4);
}
.filter-main-btn.active.filter-color-pq {
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 8px rgba(255, 180, 0, 0.3);
}

/* =====================================================
   6. SOUS-PANNEAU (par sous-opus)
   Slide-down via max-height.
   S'affiche sous le bouton logo principal.
   ===================================================== */

.filter-sub-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  padding-left: 6px;

  /* Slide fermé */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    padding 0.25s ease;
}

/* État ouvert / auto-expand (P2) */
.filter-sub-panel.expanded {
  max-height: 380px;
  opacity: 1;
  padding: 4px 0 3px 6px;
}

/* =====================================================
   7. BOUTONS SOUS-FILTRES (par opus précis)
   Image logo + bordure colorée selon le jeu.
   Inactive : grisé, opacité réduite.
   Active : lueur colorée vive.
   ===================================================== */

.filter-sub-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  padding: 3px 4px;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease,
    opacity 0.18s ease,
    filter 0.18s ease;
}

.filter-sub-btn:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.09);
}

/* Inactive : grisé */
.filter-sub-btn:not(.active) {
  opacity: 0.32;
  filter: grayscale(60%);
}

.filter-sub-btn.active {
  opacity: 1;
  filter: none;
}

/* Logo image */
.filter-sub-logo {
  height: 50px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  pointer-events: none;
  display: block;
}

/* ── Couleurs des sous-filtres actifs ─────────────────── */

/* P1 — Violet mystique */
.filter-sub-btn.filter-color-p1.active {
  border-color: #8b00ff;
  box-shadow:
    0 0 8px rgba(139, 0, 255, 0.55),
    inset 0 0 5px rgba(139, 0, 255, 0.12);
  background: rgba(139, 0, 255, 0.08);
}

/* P2 IS — Rouge Innocent Sin */
.filter-sub-btn.filter-color-p2is.active {
  border-color: #ff4136;
  box-shadow:
    0 0 8px rgba(255, 65, 54, 0.6),
    inset 0 0 5px rgba(255, 65, 54, 0.1);
  background: rgba(255, 65, 54, 0.08);
}

/* P2 EP — Violet Eternal Punishment (différent de P1) */
.filter-sub-btn.filter-color-p2ep.active {
  border-color: #9333ea;
  box-shadow:
    0 0 8px rgba(147, 51, 234, 0.6),
    inset 0 0 5px rgba(147, 51, 234, 0.1);
  background: rgba(147, 51, 234, 0.08);
}

/* P3 base / Reload — Bleu Dark Hour */
.filter-sub-btn.filter-color-p3.active {
  border-color: #2083f5;
  box-shadow:
    0 0 8px rgba(32, 131, 245, 0.6),
    inset 0 0 5px rgba(32, 131, 245, 0.12);
  background: rgba(32, 131, 245, 0.08);
}

/* P3 FES — Bleu légèrement plus foncé */
.filter-sub-btn.filter-color-p3fes.active {
  border-color: #1060c0;
  box-shadow:
    0 0 8px rgba(16, 96, 192, 0.6),
    inset 0 0 5px rgba(16, 96, 192, 0.1);
  background: rgba(16, 96, 192, 0.08);
}

/*
  P3 Portable — Dégradé bleu→rose (Makoto Yuki + Kotone Shiomi)
  border-image ne supporte pas border-radius, on utilise
  background-clip: padding-box avec un fond transparent.
*/
.filter-sub-btn.filter-color-p3p {
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(10, 10, 20, 0.85), rgba(10, 10, 20, 0.85)) padding-box,
    linear-gradient(135deg, #2083f5 0%, #ff6eb0 100%) border-box;
}
.filter-sub-btn.filter-color-p3p.active {
  box-shadow:
    0 0 9px rgba(140, 100, 215, 0.55),
    inset 0 0 5px rgba(100, 50, 200, 0.08);
  opacity: 1;
  filter: none;
}
.filter-sub-btn.filter-color-p3p:not(.active) {
  background:
    linear-gradient(rgba(10, 10, 20, 0.85), rgba(10, 10, 20, 0.85)) padding-box,
    linear-gradient(135deg, rgba(32, 131, 245, 0.35) 0%, rgba(255, 110, 176, 0.35) 100%) border-box;
}

/* P3R — Persona 3 Reload : bleu électrique + cyan */
.filter-sub-btn.filter-color-p3r.active {
  border-color: #00bfff;
  box-shadow:
    0 0 8px rgba(0, 191, 255, 0.65),
    inset 0 0 5px rgba(0, 191, 255, 0.12);
  background: rgba(0, 191, 255, 0.07);
}

/* P4 base — Jaune Junes */
.filter-sub-btn.filter-color-p4.active {
  border-color: #ffd700;
  box-shadow:
    0 0 8px rgba(255, 215, 0, 0.65),
    inset 0 0 5px rgba(255, 215, 0, 0.12);
  background: rgba(255, 215, 0, 0.07);
}

/* P4 Golden — Or chaud */
.filter-sub-btn.filter-color-p4g.active {
  border-color: #ffb300;
  box-shadow:
    0 0 8px rgba(255, 179, 0, 0.65),
    inset 0 0 5px rgba(255, 179, 0, 0.1);
  background: rgba(255, 179, 0, 0.07);
}

/* P4 Arena Ultimax — Orange combat */
.filter-sub-btn.filter-color-p4au.active {
  border-color: #ff8c00;
  box-shadow:
    0 0 8px rgba(255, 140, 0, 0.65),
    inset 0 0 5px rgba(255, 140, 0, 0.1);
  background: rgba(255, 140, 0, 0.07);
}

/* P4 Dancing All Night — Rose-jaune dancefloor */
.filter-sub-btn.filter-color-p4d.active {
  border-color: #ff69b4;
  box-shadow:
    0 0 8px rgba(255, 105, 180, 0.65),
    inset 0 0 5px rgba(255, 105, 180, 0.1);
  background: rgba(255, 105, 180, 0.07);
}

/* P5 base — Rouge Phantom Thieves */
.filter-sub-btn.filter-color-p5.active {
  border-color: #ff4136;
  box-shadow:
    0 0 8px rgba(255, 65, 54, 0.65),
    inset 0 0 5px rgba(255, 65, 54, 0.1);
  background: rgba(255, 65, 54, 0.07);
}

/* P5 Royal — Rouge profond Kasumi */
.filter-sub-btn.filter-color-p5r.active {
  border-color: #cc0000;
  box-shadow:
    0 0 8px rgba(204, 0, 0, 0.65),
    inset 0 0 5px rgba(204, 0, 0, 0.1);
  background: rgba(204, 0, 0, 0.07);
}

/* P5 Strikers — Orange-rouge action */
.filter-sub-btn.filter-color-p5s.active {
  border-color: #ff6600;
  box-shadow:
    0 0 8px rgba(255, 102, 0, 0.65),
    inset 0 0 5px rgba(255, 102, 0, 0.1);
  background: rgba(255, 102, 0, 0.07);
}

/* P5 Tactica — Rouge tactique */
.filter-sub-btn.filter-color-p5t.active {
  border-color: #e82029;
  box-shadow:
    0 0 8px rgba(232, 32, 41, 0.6),
    inset 0 0 5px rgba(0, 80, 100, 0.06);
  background: rgba(232, 32, 41, 0.07);
}

/* P5X — Rouge + noir Phantom X */
.filter-sub-btn.filter-color-p5x.active,
.filter-main-btn.filter-color-p5x.active {
  border-color: #ff003c;
  box-shadow:
    0 0 10px rgba(255, 0, 60, 0.7),
    inset 0 0 5px rgba(255, 0, 60, 0.1);
  background: rgba(255, 0, 60, 0.07);
}

/* PQ — Or aventure */
.filter-sub-btn.filter-color-pq.active {
  border-color: #ffd700;
  box-shadow:
    0 0 8px rgba(255, 215, 0, 0.55),
    inset 0 0 5px rgba(255, 179, 0, 0.08);
  background: rgba(255, 215, 0, 0.06);
}

/* PQ2 — Or plus clair */
.filter-sub-btn.filter-color-pq2.active {
  border-color: #fff44f;
  box-shadow:
    0 0 8px rgba(255, 244, 79, 0.55),
    inset 0 0 5px rgba(255, 244, 79, 0.08);
  background: rgba(255, 244, 79, 0.06);
}

/* =====================================================
   7b. TOOLTIPS — Nom du jeu au survol (couleur par opus)
   Utilise content: attr(aria-label) pour afficher
   le nom du jeu depuis l'attribut existant.
   ===================================================== */

.filter-main-btn::after,
.filter-sub-btn::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: rgba(8, 4, 12, 0.96);
  color: rgba(255, 255, 255, 0.9);
  font-size: 9px;
  font-weight: 900;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1.5px solid rgba(200, 0, 40, 0.45);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  z-index: 300;
}

.filter-main-btn:hover::after,
.filter-sub-btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Couleurs tooltip par jeu */
.filter-main-btn.filter-color-p1::after,
.filter-sub-btn.filter-color-p1::after {
  border-color: rgba(139, 0, 255, 0.65);
  color: #c898ff;
}

.filter-main-btn.filter-color-p2::after,
.filter-sub-btn.filter-color-p2is::after,
.filter-sub-btn.filter-color-p2ep::after {
  border-color: rgba(200, 40, 20, 0.65);
  color: #ff9984;
}

.filter-main-btn.filter-color-p3::after,
.filter-sub-btn.filter-color-p3::after,
.filter-sub-btn.filter-color-p3fes::after,
.filter-sub-btn.filter-color-p3p::after,
.filter-sub-btn.filter-color-p3r::after {
  border-color: rgba(32, 131, 245, 0.65);
  color: #88c4ff;
}

.filter-main-btn.filter-color-p4::after,
.filter-sub-btn.filter-color-p4::after,
.filter-sub-btn.filter-color-p4g::after,
.filter-sub-btn.filter-color-p4au::after,
.filter-sub-btn.filter-color-p4d::after {
  border-color: rgba(255, 215, 0, 0.65);
  color: #ffe050;
}

.filter-main-btn.filter-color-p5::after,
.filter-sub-btn.filter-color-p5::after,
.filter-sub-btn.filter-color-p5r::after,
.filter-sub-btn.filter-color-p5s::after,
.filter-sub-btn.filter-color-p5t::after {
  border-color: rgba(255, 65, 54, 0.65);
  color: #ff9088;
}

.filter-main-btn.filter-color-p5x::after,
.filter-sub-btn.filter-color-p5x::after {
  border-color: rgba(255, 0, 60, 0.7);
  color: #ff709a;
}

.filter-main-btn.filter-color-pq::after,
.filter-sub-btn.filter-color-pq::after,
.filter-sub-btn.filter-color-pq2::after {
  border-color: rgba(255, 215, 0, 0.55);
  color: #ffe870;
}

/* =====================================================
   8. RESPONSIVE
   ===================================================== */

/* ── Tablette (≤768px) ──────────────────────────────── */
@media (max-width: 768px) {
  .filter-toggle-btn {
    padding: 6px 11px;
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .filter-logo {
    height: 52px;
    max-width: 130px;
  }
  .filter-sub-logo {
    height: 40px;
    max-width: 80px;
  }

  .filter-dropdown {
    min-width: 185px;
  }

  /* Bouton global tout-cocher : léger resserrement */
  .filter-select-all-btn {
    font-size: 7.5px;
    padding: 3px 6px;
    letter-spacing: 1.4px;
    margin-bottom: 7px;
  }

  /* Boutons tout-cocher par groupe */
  .filter-group-select-btn {
    font-size: 7px;
    padding: 2px 5px;
    letter-spacing: 1.3px;
    margin-bottom: 4px;
  }
}

/* ── Mobile (≤480px) ────────────────────────────────── */
@media (max-width: 480px) {
  .filter-toggle-btn {
    padding: 5px 9px;
    font-size: 9px;
    gap: 5px;
    letter-spacing: 1px;
  }

  /* Masque le texte "FILTRES", garde l'icône + flèche */
  .filter-toggle-text {
    display: none;
  }

  .filter-logo {
    height: 44px;
    max-width: 110px;
  }
  .filter-sub-logo {
    height: 32px;
    max-width: 65px;
  }

  .filter-dropdown {
    min-width: 158px;
    padding: 7px 6px;
  }

  .filter-sub-panel {
    gap: 3px;
  }
  .filter-sub-btn {
    padding: 2px 3px;
  }
  .filter-main-btn {
    padding: 4px 6px;
  }

  /* Bouton global tout-cocher : compact, lettre-spacing réduit */
  .filter-select-all-btn {
    font-size: 7px;
    padding: 2px 5px;
    letter-spacing: 1.2px;
    margin-bottom: 6px;
  }

  /* Boutons tout-cocher par groupe : minimaliste */
  .filter-group-select-btn {
    font-size: 6.5px;
    padding: 2px 4px;
    letter-spacing: 1px;
    margin-bottom: 3px;
  }
}

/* =====================================================
   9. MODE CLAIR (sans classe .darkmode sur <body>)
   Fond clair, semi-transparent pour le panneau
   et les boutons. Le bouton toggle garde son
   style Persona sombre dans tous les cas.
   En mode sombre, les styles sombres par défaut
   ci-dessus restent actifs.
   ===================================================== */

body:not(.darkmode) .filter-dropdown {
  background: rgba(250, 250, 255, 0.98);
  border-color: rgba(180, 0, 40, 0.25);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.14),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(12px);
}

body:not(.darkmode) .filter-group + .filter-group {
  border-top-color: rgba(0, 0, 0, 0.07);
}

body:not(.darkmode) .filter-group-auto-label {
  color: rgba(0, 0, 0, 0.45);
}

body:not(.darkmode) .filter-main-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

body:not(.darkmode) .filter-main-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

body:not(.darkmode) .filter-expand-arrow {
  color: rgba(0, 0, 0, 0.35);
}

body:not(.darkmode) .filter-main-btn.expanded .filter-expand-arrow {
  color: rgba(0, 0, 0, 0.7);
}

body:not(.darkmode) .filter-main-btn:not(.active) .filter-logo {
  opacity: 0.38;
  filter: grayscale(55%);
}

body:not(.darkmode) .filter-sub-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.11);
}

body:not(.darkmode) .filter-sub-btn:hover {
  background: rgba(0, 0, 0, 0.07);
}

body:not(.darkmode) .filter-sub-btn:not(.active) {
  opacity: 0.38;
  filter: grayscale(55%);
}

/* P3P fond clair en mode clair */
body:not(.darkmode) .filter-sub-btn.filter-color-p3p {
  background:
    linear-gradient(rgba(248, 248, 255, 0.96), rgba(248, 248, 255, 0.96)) padding-box,
    linear-gradient(135deg, #2083f5 0%, #ff6eb0 100%) border-box;
}

body:not(.darkmode) .filter-sub-btn.filter-color-p3p:not(.active) {
  background:
    linear-gradient(rgba(248, 248, 255, 0.96), rgba(248, 248, 255, 0.96)) padding-box,
    linear-gradient(135deg, rgba(32, 131, 245, 0.3) 0%, rgba(255, 110, 176, 0.3) 100%) border-box;
}

/* =====================================================
   10. DARK MODE — LOGOS VISIBLES
   Les logos PNG (noirs) sont invisibles sur fond sombre.
   Solution : fond clair teinté par jeu derrière chaque
   bouton. Les images restent INCHANGÉES (pas de filter
   CSS sur les logos).
   Inactif en dark mode : opacité 0.60 (vs 0.32 en clair)
   pour garder les logos lisibles malgré le fond clair.
   ===================================================== */

/* Inactive dark mode : opacité relevée pour que le fond
   clair reste visible et les logos lisibles */
.darkmode .filter-sub-btn:not(.active) {
  opacity: 0.6;
  filter: grayscale(55%);
}

/* ── Fonds clairs teintés — boutons principaux (dark mode) ── */
.darkmode .filter-main-btn.filter-color-p1 {
  background: rgba(200, 165, 255, 0.84);
}
.darkmode .filter-main-btn.filter-color-p2 {
  background: rgba(255, 195, 178, 0.84);
}
.darkmode .filter-main-btn.filter-color-p3 {
  background: rgba(168, 212, 255, 0.84);
}
.darkmode .filter-main-btn.filter-color-p4 {
  background: rgba(255, 246, 158, 0.84);
}
.darkmode .filter-main-btn.filter-color-p5 {
  background: rgba(255, 182, 178, 0.84);
}
.darkmode .filter-main-btn.filter-color-p5x {
  background: rgba(255, 172, 200, 0.84);
}
.darkmode .filter-main-btn.filter-color-pq {
  background: rgba(255, 242, 148, 0.84);
}

/* Inactive : logo légèrement atténué */
.darkmode .filter-main-btn:not(.active) .filter-logo {
  opacity: 0.42;
  filter: grayscale(55%);
}

/* ── Fonds clairs teintés — sous-boutons (dark mode) ──────── */
.darkmode .filter-sub-btn.filter-color-p1 {
  background: rgba(200, 165, 255, 0.84);
}
.darkmode .filter-sub-btn.filter-color-p2is {
  background: rgba(255, 185, 172, 0.84);
}
.darkmode .filter-sub-btn.filter-color-p2ep {
  background: rgba(220, 185, 255, 0.84);
}
.darkmode .filter-sub-btn.filter-color-p3 {
  background: rgba(168, 212, 255, 0.84);
}
.darkmode .filter-sub-btn.filter-color-p3fes {
  background: rgba(155, 200, 255, 0.84);
}
.darkmode .filter-sub-btn.filter-color-p3r {
  background: rgba(148, 232, 255, 0.84);
}

/* P3P : fond dégradé clair bleu→rose en dark mode */
.darkmode .filter-sub-btn.filter-color-p3p {
  background:
    linear-gradient(rgba(215, 225, 255, 0.84), rgba(248, 210, 248, 0.84)) padding-box,
    linear-gradient(135deg, #2083f5 0%, #ff6eb0 100%) border-box;
}
.darkmode .filter-sub-btn.filter-color-p3p:not(.active) {
  background:
    linear-gradient(rgba(215, 225, 255, 0.84), rgba(248, 210, 248, 0.84)) padding-box,
    linear-gradient(135deg, rgba(32, 131, 245, 0.5) 0%, rgba(255, 110, 176, 0.5) 100%) border-box;
}

.darkmode .filter-sub-btn.filter-color-p4 {
  background: rgba(255, 246, 158, 0.84);
}
.darkmode .filter-sub-btn.filter-color-p4g {
  background: rgba(255, 238, 138, 0.84);
}
.darkmode .filter-sub-btn.filter-color-p4au {
  background: rgba(255, 228, 168, 0.84);
}
.darkmode .filter-sub-btn.filter-color-p4d {
  background: rgba(255, 205, 235, 0.84);
}
.darkmode .filter-sub-btn.filter-color-p5 {
  background: rgba(255, 182, 178, 0.84);
}
.darkmode .filter-sub-btn.filter-color-p5r {
  background: rgba(255, 168, 168, 0.84);
}
.darkmode .filter-sub-btn.filter-color-p5s {
  background: rgba(255, 210, 178, 0.84);
}
.darkmode .filter-sub-btn.filter-color-p5t {
  background: rgba(255, 182, 182, 0.84);
}
.darkmode .filter-sub-btn.filter-color-p5x {
  background: rgba(255, 172, 200, 0.84);
}
.darkmode .filter-sub-btn.filter-color-pq {
  background: rgba(255, 242, 148, 0.84);
}
.darkmode .filter-sub-btn.filter-color-pq2 {
  background: rgba(255, 248, 130, 0.84);
}

/* =====================================================
   11. ANIMATIONS D'ENTRÉE — DA PAR JEU
   À l'expansion d'un sous-panneau, chaque bouton anime
   selon l'identité visuelle et l'atmosphère du jeu.
   Défilement en escalier (stagger) via nth-child.

   Jeux sans sous-panneau (P1, P5X) → pas d'animation ici.
   ===================================================== */

/* ── P2 — Gothique / Émergence des ombres ───────────────
   Persona 2 : atmosphère sombre, occulte, couleurs froides.
   Chaque bouton « émerge » du néant comme une apparition. */
@keyframes p2DarkEmerge {
  from {
    opacity: 0;
    transform: scale(0.78) translateY(6px);
    filter: brightness(0.12);
  }
  52% {
    filter: brightness(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: brightness(1);
  }
}
[data-group-panel="P2"].expanded .filter-sub-btn {
  animation: p2DarkEmerge 0.58s ease both;
}
[data-group-panel="P2"].expanded .filter-sub-btn:nth-child(2) {
  animation-delay: 0.1s;
}

/* ── P3 — Mélancolique / Tic de l'horloge (Dark Hour) ──
   Persona 3 : compte à rebours, horloge inversée, 0h.
   Chaque bouton « tombe » comme une aiguille en rotation. */
@keyframes p3ClockDrop {
  from {
    opacity: 0;
    transform: translateY(-14px) rotate(-7deg);
  }
  55% {
    transform: translateY(4px) rotate(1.5deg);
  }
  76% {
    transform: translateY(-2px) rotate(-0.5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}
[data-group-panel="P3"].expanded .filter-sub-btn {
  animation: p3ClockDrop 0.44s cubic-bezier(0.4, 0, 0.2, 1) both;
}
[data-group-panel="P3"].expanded .filter-sub-btn:nth-child(2) {
  animation-delay: 0.07s;
}
[data-group-panel="P3"].expanded .filter-sub-btn:nth-child(3) {
  animation-delay: 0.14s;
}
[data-group-panel="P3"].expanded .filter-sub-btn:nth-child(4) {
  animation-delay: 0.21s;
}

/* ── P4 — Solaire / Pop élastique des Junes ─────────────
   Persona 4 : soleil d'Inaba, énergie, Investigation Team.
   Chaque bouton surgit comme un rayon de soleil éclatant. */
@keyframes p4SunBounce {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  55% {
    opacity: 1;
    transform: scale(1.22);
  }
  78% {
    transform: scale(0.91);
  }
  91% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
[data-group-panel="P4"].expanded .filter-sub-btn {
  animation: p4SunBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
[data-group-panel="P4"].expanded .filter-sub-btn:nth-child(2) {
  animation-delay: 0.06s;
}
[data-group-panel="P4"].expanded .filter-sub-btn:nth-child(3) {
  animation-delay: 0.12s;
}
[data-group-panel="P4"].expanded .filter-sub-btn:nth-child(4) {
  animation-delay: 0.18s;
}

/* ── P5 — Phantom Thieves / Entrée rebelle en biais ─────
   Persona 5 : style, rébellion, carte de visite phantom.
   Chaque bouton glisse depuis la gauche avec un skew
   tranchant, puis se stabilise (calling card reveal). */
@keyframes p5PhantomSlide {
  from {
    opacity: 0;
    transform: translateX(-22px) skewX(-13deg);
  }
  62% {
    transform: translateX(5px) skewX(2.5deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) skewX(0deg);
  }
}
[data-group-panel="P5"].expanded .filter-sub-btn {
  animation: p5PhantomSlide 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
[data-group-panel="P5"].expanded .filter-sub-btn:nth-child(2) {
  animation-delay: 0.055s;
}
[data-group-panel="P5"].expanded .filter-sub-btn:nth-child(3) {
  animation-delay: 0.11s;
}
[data-group-panel="P5"].expanded .filter-sub-btn:nth-child(4) {
  animation-delay: 0.165s;
}

/* ── PQ — Chibi aventure / Rebond espiègle ──────────────
   Persona Q : chibi, Yasogami + Gekkoukan, humour léger.
   Chaque bouton pirouette et rebondit comme un chibi
   surexcité partant à l'aventure dans le labyrinthe. */
@keyframes pqChibiPop {
  0% {
    opacity: 0;
    transform: rotate(-15deg) scale(0.58);
  }
  38% {
    opacity: 1;
    transform: rotate(9deg) scale(1.16);
  }
  64% {
    transform: rotate(-4deg) scale(0.94);
  }
  82% {
    transform: rotate(2.5deg) scale(1.04);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}
[data-group-panel="PQ"].expanded .filter-sub-btn {
  animation: pqChibiPop 0.54s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
[data-group-panel="PQ"].expanded .filter-sub-btn:nth-child(2) {
  animation-delay: 0.09s;
}

/* =====================================================
   12. BOUTON "TOUT COCHER / DÉCOCHER"
   Injecté dynamiquement en tête du dropdown par
   filterMenu.js. Style sobre, adapté mode clair/sombre.
   ===================================================== */

.filter-select-all-btn {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 9px;
  font-weight: 900;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 5px 8px;
  cursor: pointer;
  margin-bottom: 7px;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.filter-select-all-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}

/* Mode clair */
body:not(.darkmode) .filter-select-all-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.13);
  color: rgba(0, 0, 0, 0.52);
}

body:not(.darkmode) .filter-select-all-btn:hover {
  background: rgba(0, 0, 0, 0.09);
  color: rgba(0, 0, 0, 0.82);
  border-color: rgba(0, 0, 0, 0.28);
}

/* État "tout décoché" — rouge doux pour signaler l'action */
.filter-select-all-btn[data-state="select"] {
  border-color: rgba(200, 0, 40, 0.35);
}
.filter-select-all-btn[data-state="select"]:hover {
  border-color: rgba(255, 0, 50, 0.65);
  color: #ff6680;
}

body:not(.darkmode) .filter-select-all-btn[data-state="select"] {
  border-color: rgba(180, 0, 30, 0.28);
  color: rgba(150, 0, 20, 0.7);
}
body:not(.darkmode) .filter-select-all-btn[data-state="select"]:hover {
  border-color: rgba(200, 0, 30, 0.55);
  color: rgba(180, 0, 20, 0.9);
}

/* =====================================================
   13. BOUTONS "TOUT COCHER" PAR GROUPE
   Injectés dynamiquement en tête de chaque sous-panneau
   (.filter-sub-panel) par filterMenu.js.
   Prennent toute la largeur de la rangée flex.
   ===================================================== */

.filter-group-select-btn {
  flex: 0 0 100%; /* pleine largeur dans le flex-wrap */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 8px;
  font-weight: 900;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 3px 7px;
  cursor: pointer;
  margin-bottom: 5px;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease;
}

.filter-group-select-btn:hover {
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Mode clair */
body:not(.darkmode) .filter-group-select-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.11);
  color: rgba(0, 0, 0, 0.48);
}
body:not(.darkmode) .filter-group-select-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.74);
  border-color: rgba(0, 0, 0, 0.24);
}

/* État "tout décoché" → rouge discret */
.filter-group-select-btn[data-state="select"] {
  border-color: rgba(200, 0, 40, 0.32);
  color: rgba(255, 120, 140, 0.75);
}
.filter-group-select-btn[data-state="select"]:hover {
  border-color: rgba(255, 0, 50, 0.6);
  color: #ff6680;
}

body:not(.darkmode) .filter-group-select-btn[data-state="select"] {
  border-color: rgba(180, 0, 28, 0.25);
  color: rgba(150, 0, 18, 0.62);
}
body:not(.darkmode) .filter-group-select-btn[data-state="select"]:hover {
  border-color: rgba(200, 0, 28, 0.48);
  color: rgba(180, 0, 18, 0.86);
}

/* Dark mode : les styles par jeu (section 14) prennent le relais —
   aucun override générique ici pour ne pas écraser les couleurs de jeu. */

/* =====================================================
   14. BOUTONS "TOUT COCHER" — IDENTITÉ VISUELLE PAR JEU

   Ces règles surchargent les styles génériques des
   sections 12–13 (même spécificité, déclarées après).
   P1 n'a pas de groupe (filtre direct → pas de bouton).

   Structure CSS ciblée :
     [data-group-panel="X"] .filter-group-select-btn
   ===================================================== */

/* Transitions étendues communes à tous les boutons stylisés */
[data-group-panel] .filter-group-select-btn {
  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.2s ease,
    transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── P2 — Sang et Ombres (Innocent Sin / Eternal Punishment) ─── */

[data-group-panel="P2"] .filter-group-select-btn {
  background: linear-gradient(135deg, rgba(65, 5, 15, 0.9) 0%, rgba(30, 0, 32, 0.9) 100%);
  border: 1px solid rgba(195, 25, 50, 0.68);
  color: rgba(255, 115, 110, 0.96);
  box-shadow:
    0 0 8px rgba(155, 0, 30, 0.32),
    inset 0 0 10px rgba(90, 0, 10, 0.18);
  text-shadow: 0 0 9px rgba(200, 0, 40, 0.45);
}
[data-group-panel="P2"] .filter-group-select-btn:hover {
  background: linear-gradient(135deg, rgba(100, 5, 20, 0.95) 0%, rgba(50, 0, 52, 0.95) 100%);
  border-color: rgba(235, 40, 70, 0.92);
  color: #ff8880;
  box-shadow: 0 0 14px rgba(200, 0, 50, 0.52);
  transform: scale(1.02);
}
[data-group-panel="P2"] .filter-group-select-btn[data-state="select"] {
  border-color: rgba(175, 0, 35, 0.75);
  color: rgba(220, 60, 60, 0.72);
}

/* ── P3 — Minuit et Dark Hour (Persona 3) ──────────────────────── */

[data-group-panel="P3"] .filter-group-select-btn {
  background: linear-gradient(135deg, rgba(2, 10, 42, 0.92) 0%, rgba(5, 18, 58, 0.92) 100%);
  border: 1px solid rgba(32, 131, 245, 0.58);
  color: rgba(95, 172, 255, 0.94);
  box-shadow: 0 0 8px rgba(32, 131, 245, 0.22);
  text-shadow: 0 0 9px rgba(32, 131, 245, 0.38);
}
[data-group-panel="P3"] .filter-group-select-btn:hover {
  background: linear-gradient(135deg, rgba(4, 16, 62, 0.97) 0%, rgba(7, 26, 85, 0.97) 100%);
  border-color: rgba(32, 131, 245, 0.9);
  color: #82c0ff;
  box-shadow: 0 0 14px rgba(32, 131, 245, 0.48);
  transform: scale(1.02);
}
[data-group-panel="P3"] .filter-group-select-btn[data-state="select"] {
  border-color: rgba(32, 100, 200, 0.68);
  color: rgba(60, 140, 230, 0.72);
}

/* ── P4 — Junes Pop / Soleil d'Inaba (Persona 4) ──────────────── */

[data-group-panel="P4"] .filter-group-select-btn {
  background: linear-gradient(135deg, #ffd700 0%, #ffa200 100%);
  border: 1.5px solid #ffbb00;
  color: #5c3800;
  font-weight: 900;
  box-shadow:
    0 2px 10px rgba(255, 215, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
[data-group-panel="P4"] .filter-group-select-btn:hover {
  background: linear-gradient(135deg, #ffe034 0%, #ffb800 100%);
  border-color: #ffd000;
  color: #3d2500;
  box-shadow:
    0 3px 18px rgba(255, 215, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.52);
  transform: scale(1.06);
}
[data-group-panel="P4"] .filter-group-select-btn:active {
  transform: scale(0.95);
}
[data-group-panel="P4"] .filter-group-select-btn[data-state="select"] {
  background: linear-gradient(135deg, rgba(255, 200, 0, 0.55) 0%, rgba(255, 145, 0, 0.55) 100%);
  border-color: rgba(200, 145, 0, 0.68);
  color: #7a4c00;
  box-shadow: 0 1px 6px rgba(255, 185, 0, 0.22);
  text-shadow: none;
}

/* ── P5 — Carte de Visite des Phantom Thieves (Persona 5) ─────── */

[data-group-panel="P5"] .filter-group-select-btn {
  background: linear-gradient(135deg, #0d0d0d 0%, #1e0000 100%);
  border: 1px solid rgba(255, 65, 54, 0.72);
  color: rgba(255, 105, 95, 0.96);
  box-shadow:
    0 0 9px rgba(255, 30, 20, 0.28),
    inset 0 0 12px rgba(255, 0, 0, 0.06);
  text-shadow: 0 0 9px rgba(255, 60, 40, 0.42);
}
[data-group-panel="P5"] .filter-group-select-btn:hover {
  background: linear-gradient(135deg, #160000 0%, #280000 100%);
  border-color: rgba(255, 65, 54, 0.97);
  color: #ff7060;
  box-shadow: 0 0 16px rgba(255, 50, 30, 0.52);
  transform: scale(1.02);
}
[data-group-panel="P5"] .filter-group-select-btn[data-state="select"] {
  border-color: rgba(200, 0, 0, 0.72);
  color: rgba(240, 60, 50, 0.72);
}

/* ── PQ — Aventure Dorée des Chibi (Persona Q) ────────────────── */

[data-group-panel="PQ"] .filter-group-select-btn {
  background: linear-gradient(135deg, rgba(48, 30, 0, 0.92) 0%, rgba(68, 46, 0, 0.92) 100%);
  border: 1px solid rgba(255, 192, 0, 0.65);
  color: rgba(255, 208, 55, 0.97);
  box-shadow: 0 0 8px rgba(255, 180, 0, 0.3);
  text-shadow: 0 0 9px rgba(255, 200, 0, 0.38);
}
[data-group-panel="PQ"] .filter-group-select-btn:hover {
  background: linear-gradient(135deg, rgba(70, 48, 0, 0.96) 0%, rgba(94, 64, 0, 0.96) 100%);
  border-color: rgba(255, 215, 0, 0.94);
  color: #ffd700;
  box-shadow: 0 0 16px rgba(255, 195, 0, 0.52);
  transform: scale(1.03);
}
[data-group-panel="PQ"] .filter-group-select-btn[data-state="select"] {
  border-color: rgba(200, 155, 0, 0.65);
  color: rgba(220, 165, 0, 0.72);
}

/* ── Ajustements mode CLAIR — fonds colorés sur panneau blanc ─── */

/* P2 et P5 : fond sombre bien visible sur panneau blanc → rien à changer.
   P3 : fond bleu nuit → idem, fort contraste.
   P4 / PQ : jaune/or sur blanc, parfait.
   Seul ajustement utile : ombres légèrement renforcées pour l'ancrage visuel. */

body:not(.darkmode) [data-group-panel="P4"] .filter-group-select-btn {
  box-shadow:
    0 3px 12px rgba(255, 215, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 1px 3px rgba(0, 0, 0, 0.1);
}
body:not(.darkmode) [data-group-panel="P2"] .filter-group-select-btn {
  box-shadow:
    0 1px 8px rgba(155, 0, 30, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.1);
}
body:not(.darkmode) [data-group-panel="P3"] .filter-group-select-btn {
  box-shadow:
    0 1px 8px rgba(32, 131, 245, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.1);
}
body:not(.darkmode) [data-group-panel="P5"] .filter-group-select-btn {
  box-shadow:
    0 1px 8px rgba(255, 50, 40, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.1);
}
body:not(.darkmode) [data-group-panel="PQ"] .filter-group-select-btn {
  box-shadow:
    0 1px 8px rgba(255, 180, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

/* =====================================================
   15. ANIMATIONS D'ENTRÉE — BOUTONS DE GROUPE
   Déclenchées lorsque .expanded est ajouté au panneau
   parent (clic sur le logo du jeu). Réutilisent les
   keyframes de la section 11 (déjà définis par jeu).

   Le bouton de groupe apparaît EN PREMIER (delay 0s),
   les sous-boutons se décalent après lui (delay ≥ 0.06s).
   ===================================================== */

/* P2 auto-expand : visible dès l'ouverture du dropdown.
   L'animation se joue au chargement (élément visible = ok). */
[data-group-panel="P2"].expanded .filter-group-select-btn {
  animation: p2DarkEmerge 0.62s ease both;
}

/* P3 — chute d'horloge : tombe depuis le haut */
[data-group-panel="P3"].expanded .filter-group-select-btn {
  animation: p3ClockDrop 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* P4 — pop solaire : même keyframe que les sous-boutons ! */
[data-group-panel="P4"].expanded .filter-group-select-btn {
  animation: p4SunBounce 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* P5 — glissement biais Phantom Thieves */
[data-group-panel="P5"].expanded .filter-group-select-btn {
  animation: p5PhantomSlide 0.34s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* PQ — pirouette chibi espiègle */
[data-group-panel="PQ"].expanded .filter-group-select-btn {
  animation: pqChibiPop 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Bandeau "aucun filtre sélectionné" ──────────────────────────
   Affiché sous le bouton toggle quand activeOpus est vide.
   Injecté dynamiquement par filterMenu.js. */
.filter-empty-warning {
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #f87171;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.01em;
}

/* ── Persona Trinity Souls (2.1) — filtre direct, accent teal ── */
.filter-main-btn.active.filter-color-pts {
  border-color: rgba(0, 190, 200, 0.7);
  box-shadow: 0 0 10px rgba(0, 190, 200, 0.4);
}
.filter-main-btn.filter-color-pts.active {
  border-color: #00bec8;
  box-shadow:
    0 0 10px rgba(0, 190, 200, 0.7),
    inset 0 0 5px rgba(0, 190, 200, 0.1);
}

/* ── Ce que fait un clic, dit une fois en haut du panneau (2.2) ─────────────
   Le panneau ne montrait que des logos : impossible de deviner qu'un clic
   inclut/exclut un jeu et que la flèche ouvre ses opus. */
.filter-hint {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  line-height: 1.45;
}
body:not(.darkmode) .filter-hint {
  background: rgba(0, 0, 0, 0.05);
  color: #555;
}

/* État lisible d'un coup d'œil : un jeu retenu porte une pastille ✓ */
.filter-main-btn,
.filter-sub-btn {
  position: relative;
}
/* ::before et pas ::after : ::after porte déjà l infobulle du nom du jeu
   (opacity 0 au repos) — la pastille y était invisible ET cassait l infobulle. */
.filter-main-btn.active::before,
.filter-sub-btn.active::before {
  content: "✓";
  position: absolute;
  /* À l intérieur du bouton : le panneau défile (overflow) et une pastille
     débordante était rognée. */
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2bae66;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* …et un jeu écarté se voit aussi : contour en pointillés, pas juste un logo pâle */
.filter-main-btn:not(.active),
.filter-sub-btn:not(.active) {
  border-style: dashed;
}

/* Boutons « tout / aucun » de groupe : plus discrets que le bouton global */
.filter-group-select-btn {
  font-size: 10px;
  padding: 3px 8px;
  opacity: 0.85;
}

/* Le panneau ne dépasse plus de l'écran (P5X était coupé en bas) */
/* ═══════════════════════════════════════════════════════════════════════════
   PANNEAU EN MODALE (2.2 — retours Hamza du 2026-09-16)
   Le menu déroulant était une colonne étroite accrochée sous le bouton, qui
   dépassait de l'écran. Ouvert, il devient une fenêtre centrée : en-tête avec
   compteur et croix, une carte par jeu, et TOUS les opus visibles d'emblée —
   dans une modale, il y a la place, donc plus de flèches à déplier.
   Le markup des pages ne change pas : .filter-dropdown.open suffit.
   ═══════════════════════════════════════════════════════════════════════════ */

.filter-dropdown.open {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10050;
  width: min(880px, 94vw);
  max-width: 880px;
  max-height: min(84vh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 16px;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  display: block;
}

/* ── En-tête collant ── */
.filter-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  background: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.filter-head-title {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #e63946);
}

.filter-head-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

.filter-head-close {
  min-height: 0;
  margin-left: auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.filter-head-close:hover {
  background: var(--accent, #e63946);
  color: #fff;
}

.filter-hint {
  margin: 12px 16px 4px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.filter-hint--sub {
  margin: 0 16px 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.filter-dropdown.open > .filter-select-all-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 14px;
}

/* ── Une carte par jeu ── */
.filter-dropdown.open .filter-group {
  margin: 0 16px 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  transition: background 0.2s ease;
}

/* La carte d'un jeu déplié se détache un peu */
.filter-dropdown.open .filter-group:has(.filter-sub-panel.expanded) {
  background: rgba(255, 255, 255, 0.08);
}
body:not(.darkmode) .filter-dropdown.open .filter-group:has(.filter-sub-panel.expanded) {
  background: rgba(0, 0, 0, 0.055);
}

/* Un jeu sans sous-opus (P1, P5X…) : sa carte n'a qu'une colonne */
.filter-dropdown.open .filter-group:not(:has(.filter-sub-panel)) {
  grid-template-columns: minmax(0, 260px);
  justify-content: center;
}

/* Le libellé « PERSONA 2 » des groupes auto-dépliés */
.filter-dropdown.open .filter-group-auto-label {
  grid-column: 1;
  align-self: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.12em;
}

/* Les opus d'un jeu se DÉROULENT VERS LA DROITE au clic sur son logo (retour
   Hamza du 2026-09-17), au lieu d'être ouverts d'office. Le volet est en ligne,
   donc on anime sa largeur : max-width (animable) + overflow, plutôt qu'un
   width:auto qui ne s'interpole pas. */
.filter-dropdown.open .filter-sub-panel {
  padding-left: 0;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;

  /* Replié : largeur ET hauteur nulles. Sans max-height, les boutons wrappés
     dans une largeur 0 s empilaient en colonne et la carte du jeu devenait
     immense alors que rien n était visible. */
  max-width: 0;
  max-height: 0;
  opacity: 0;
  transform: translateX(-10px);
  overflow: hidden;
  transition:
    max-width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.3s ease,
    opacity 0.28s ease 0.05s,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.filter-dropdown.open .filter-sub-panel.expanded {
  max-width: 1200px;
  max-height: 400px;
  opacity: 1;
  transform: none;
}

/* Chaque opus arrive à son tour pendant que le volet s'ouvre */
.filter-dropdown.open .filter-sub-panel.expanded > * {
  animation: filterOpusIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.filter-dropdown.open .filter-sub-panel.expanded > *:nth-child(1) { animation-delay: 0.04s; }
.filter-dropdown.open .filter-sub-panel.expanded > *:nth-child(2) { animation-delay: 0.09s; }
.filter-dropdown.open .filter-sub-panel.expanded > *:nth-child(3) { animation-delay: 0.14s; }
.filter-dropdown.open .filter-sub-panel.expanded > *:nth-child(4) { animation-delay: 0.19s; }
.filter-dropdown.open .filter-sub-panel.expanded > *:nth-child(5) { animation-delay: 0.24s; }
.filter-dropdown.open .filter-sub-panel.expanded > *:nth-child(n + 6) { animation-delay: 0.28s; }

@keyframes filterOpusIn {
  from {
    opacity: 0;
    transform: translateX(-14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* La flèche du logo dit qu'il y a quelque chose à ouvrir, et tourne quand c'est fait */
/* Les logos ont toutes les couleurs : la flèche porte sa propre pastille pour
   rester lisible sur un fond clair comme sur un fond sombre. */
.filter-dropdown.open .filter-expand-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(10, 10, 16, 0.72);
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

/* Rien ne bouge pour qui préfère que rien ne bouge */
@media (prefers-reduced-motion: reduce) {
  .filter-dropdown.open .filter-sub-panel,
  .filter-dropdown.open .filter-sub-panel.expanded > * {
    transition: none;
    animation: none;
  }
}

/* Boutons « tout / aucun » de groupe : en haut à droite de la carte */
.filter-dropdown.open .filter-group-select-btn {
  order: -1;
  /* La règle de base met flex: 0 0 100% (pleine largeur dans le menu étroit) :
     dans la modale la place ne manque pas, la pastille reste compacte. */
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  margin-bottom: 0;
  font-size: 10px;
  padding: 5px 12px;
  opacity: 0.9;
}

.filter-dropdown.open .filter-main-btn {
  height: 100%;
  justify-content: center;
}

.filter-dropdown.open .filter-logo {
  height: 60px;
}

/* Le fond assombri, posé par filterMenu.js pendant l'ouverture.
   z-index 999 et pas 10 000 : .filter-panel (z-index: 1000, position: absolute)
   crée un contexte d'empilement — la fenêtre est peinte DEDANS. Un fond posé sur
   le body à 10 040 passerait par-dessus et voilerait la fenêtre elle-même. */
.filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}

/* Mode clair : la modale suit le thème de la page */
body:not(.darkmode) .filter-head {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
body:not(.darkmode) .filter-head-count {
  color: #666;
}
body:not(.darkmode) .filter-hint {
  color: #444;
}
body:not(.darkmode) .filter-hint--sub {
  color: #777;
}
body:not(.darkmode) .filter-head-close {
  background: rgba(0, 0, 0, 0.06);
  color: #555;
}
body:not(.darkmode) .filter-dropdown.open .filter-group {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.08);
}
body:not(.darkmode) .filter-dropdown.open .filter-group-auto-label {
  color: #555;
}

/* État lisible d'un coup d'œil : un jeu retenu porte une pastille ✓.
   ::before et pas ::after : ::after porte déjà l'infobulle du nom du jeu
   (opacity 0 au repos) — la pastille y était invisible ET cassait l'infobulle. */
.filter-main-btn,
.filter-sub-btn {
  position: relative;
}
.filter-main-btn.active::before,
.filter-sub-btn.active::before {
  content: "✓";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2bae66;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 2;
}

/* …et un jeu écarté se voit aussi : contour en pointillés, pas juste un logo pâle */
.filter-main-btn:not(.active),
.filter-sub-btn:not(.active) {
  border-style: dashed;
}

@media (max-width: 720px) {
  .filter-dropdown.open {
    width: 96vw;
    max-height: 88vh;
  }
  .filter-dropdown.open .filter-group {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 12px 10px;
  }
  .filter-dropdown.open > .filter-select-all-btn {
    width: calc(100% - 24px);
    margin: 0 12px 12px;
  }
  .filter-hint {
    margin: 10px 12px 8px;
  }
}