/* ── Filtre niveau 2 ───────────────────────────────────── */
    .codex-filters-2 {
      display: none;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 12px;
      padding: 12px 16px;
      background: rgba(75, 54, 33, 0.08);
      border-radius: 10px;
      border: 1px dashed rgba(122,90,44,0.35);
    }
    .codex-filters-2.visible { display: flex; }

    /* Compteur badge sur bouton */
    .filtre-count {
      display: inline-block;
      background: rgba(0,0,0,0.2);
      border-radius: 8px;
      padding: 0 5px;
      font-size: 11px;
      margin-left: 4px;
      vertical-align: middle;
    }
    .codex-filter.active .filtre-count,
    .codex-filter-2.active .filtre-count {
      background: rgba(75,54,33,0.2);
    }

    /* ── Carte bestiaire enrichie ──────────────────────────── */
    .player-card .bestiaire-meta {
      width: 100%;
      padding: 6px 0px 6px;
      text-align: center;
    }

    .bestiaire-chapitres {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin: 4px 0;
      justify-content: center;
    }

    .bestiaire-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 12px;
      font-family: Georgia, serif;
      padding: 2px 7px;
      border-radius: 10px;
      white-space: nowrap;
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bestiaire-badge--chap {
      background: rgba(128,0,0,0.1);
      color: #800000;
      border: 1px solid rgba(128,0,0,0.25);
      cursor: default;
    }
    .bestiaire-badge--pj {
      background: rgba(46,107,53,0.1);
      color: #2e5a35;
      border: 1px solid rgba(46,107,53,0.25);
    }

    .bestiaire-toggle {
      background: none;
      border: none;
      font-family: Georgia, serif;
      font-size: 11px;
      color: #7a5a2c;
      cursor: pointer;
      padding: 2px 4px;
      text-decoration: underline dotted;
    }
    .bestiaire-toggle:hover { color: var(--rouge-sang); }

    .bestiaire-pj-list {
      display: none;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 4px;
    }
    .bestiaire-pj-list.open { display: flex; }

    .bestiaire-badge--scenario {
      background: rgba(60,40,140,0.1);
      color: #3a2888;
      border: 1px solid rgba(60,40,140,0.25);
      font-style: italic;
    }

    /* Scénario inline dans badge chapitre (version B) */
    .bestiaire-badge__scenario {
      font-size: 10px;
      opacity: 0.75;
      font-style: italic;
    }

    .bestiaire-badge__scenario {
      font-size: 10px;
      opacity: 0.75;
      font-style: italic;
    }

    .bestiaire-label {
      font-size: 12px;
      font-family: Georgia, serif;
      color: #8a6640;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin: 4px 0 2px;
      display: block;
    }

    /* ── Mini-portraits PJ / relations ────────────────────── */
    .mini-portraits {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin: 4px 0 2px;
      align-items: flex-start;
      justify-content: center;
    }
    .mini-portrait {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      cursor: pointer;
    }
    .mini-portrait img {
      width: 44px;
      height: 44px;
      border-radius: 6px;
      object-fit: cover;
      object-position: top;
      border: 2px solid #4a2e12;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .mini-portrait img:hover {
      transform: scale(1.12);
      box-shadow: 0 4px 12px rgba(0,0,0,0.45);
    }
    .mini-portrait__nom {
      font-size: 12px;
      font-family: Georgia, serif;
      color: #5a3a1a;
      text-align: center;
      line-height: 1.2;
      max-width: 52px;
      word-break: auto-phrase;
      align-items: center;
      justify-content: center;
    }
    .mini-portrait--pj  img { border-color: #2e5a35; margin: 5px auto 10px auto; }
    .mini-portrait--rel img { border-color: #7a3a00; margin: 5px auto 10px auto; }
    .mini-portrait--dev img { border-color: #7a3a00; margin: 5px auto 10px auto; }
    .mini-portrait--inv img { border-color: #6a2888; margin: 5px auto 10px auto; }
    .mini-portrait--nav img { border-color: #6a2888; margin: 5px auto 10px auto; }
    .mini-portrait__more {
      width: 44px;
      height: 44px;
      border-radius: 6px;
      border: 2px dashed rgba(128,0,0,0.35);
      background: rgba(128,0,0,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-family: Georgia, serif;
      color: #800000;
      cursor: pointer;
      transition: background 0.2s;
    }
    .mini-portrait__more:hover { background: rgba(128,0,0,0.12); }
    .mini-portraits--hidden { display: none; }

    /* ── Pagination ─────────────────────────────────────────── */
    .bestiaire-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin: 28px 0 10px;
    }
    .pag-btn {
      min-width: 38px;
      height: 38px;
      padding: 0 10px;
      border-radius: 8px;
      border: 2px solid var(--cuivre);
      background: #fdf8f2;
      color: #4b3621;
      font-family: 'Handlee', cursive;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pag-btn:hover    { background: rgba(160,121,75,0.15); }
    .pag-btn.active   { background: linear-gradient(#7a5a2c, #4b3621); color: #fff; border-color: var(--rouge-sang); font-weight: bold; }
    .pag-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
    .pag-btn.ellipsis { border-color: transparent; background: none; cursor: default; pointer-events: none; }
    .pag-info {
      font-family: 'EB Garamond', Georgia, serif;
      font-size: 14px;
      font-style: italic;
      color: #8a6640;
      text-align: center;
      margin-top: 6px;
    }

        @media (max-width: 1024px) {

      /* Grille 1 colonne, cartes larges */
      .players-grid { grid-template-columns: 1fr !important; gap: 14px; }
      .player-card  { max-width: 100%; }

      /* Portrait principal plus grand */
      .player-card img.portrait { width: 130px; height: 130px; }

      /* Textes de la carte */
      .player-card .info h3 { padding-top: 10px; padding-bottom: 10px; font-size: 45px; }
      .player-card .info p  { padding-top: 10px; padding-bottom: 10px; font-size: 30px; }
      .player-card .info h5 { font-size: 25px; margin-bottom: 20px !important; }

      /* Filtres niveau 1 : scroll horizontal */
      #filtreNiveau1 {
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      #filtreNiveau1::-webkit-scrollbar { display: none; }

      /* Filtres niveau 2 : wrap centré */
      .codex-filters-2 { flex-wrap: wrap; justify-content: center; gap: 6px; }

      .codex-filter,
      .codex-filter-2 {
        font-size: 28px !important;
        padding: 6px 12px !important;
        white-space: nowrap;
        flex-shrink: 0;
      }

      /* Badges chapitres */
      .bestiaire-badge     { font-size: 30px; max-width: 100%; white-space: normal; }
      .bestiaire-label     { font-size: 30px; margin-top: 30px !important; }
      .bestiaire-chapitres { gap: 20px; margin-top: 20px; }

      /* Mini-portraits plus grands */
      .mini-portrait img       { width: 100px; height: 100px; }
      .mini-portrait__more     { width: 100px; height: 100px; font-size: 30px; }
      .mini-portrait__nom      { 
        font-size: 30px;
        max-width: 60px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center; 
      }
      .mini-portraits          { gap: 65px; }

      /* Ribbon */
      .player-card .ribbon { top: 40px; left: -40px; font-size: 32px; letter-spacing: 1px; padding: 22px; }

      /* Badge nb_part */
      .nb_part { font-size: 18px; padding: 8px; }

      .bestiaire-pagination { gap: 15px; }

      .pag-btn {
        min-width: 50px;
        height: 50px;
        font-size: 40px;
      }

      .pag-info { font-size: 30px; margin-top: 30px; }
    }