/* ============================================================
   BESTIAIRE /creatures/ — variante B compacte (12/06/2026)
   Rendu par le shortcode [bestiaire] (functions.php §5).
   Tokens --mc-* avec replis clairs : suit le switch clair/sombre.
   Contexte : .post-content ~824px (page avec sidebar).
   ============================================================ */

.mcfr-bst{
  --bst-surface: var(--mc-surface, #FFFFFF);
  --bst-edge:    var(--mc-edge, #1E2422);
  --bst-ink:     var(--mc-ink, #1E2422);
  --bst-muted:   var(--mc-muted, #6B7773);
  --bst-soft:    var(--mc-bone, #F4F1EA);
  margin: 8px 0 24px;
}

/* ---- Couleurs par nature ---- */
.bst-sec--passive, .bst-chip--passive{ --bn:#3F7322; --bnb:rgba(63,115,34,.10); }
.bst-sec--neutre,  .bst-chip--neutre { --bn:#C8861B; --bnb:rgba(200,134,27,.12); }
.bst-sec--hostile, .bst-chip--hostile{ --bn:#C9483B; --bnb:rgba(201,72,59,.10); }
.bst-sec--boss,    .bst-chip--boss   { --bn:#5A3F8E; --bnb:rgba(90,63,142,.10); }
.bst-sec--avenir,  .bst-chip--avenir { --bn:#2186A0; --bnb:rgba(33,134,160,.10); }
.bst-sec--annonce, .bst-chip--annonce{ --bn:#6B7773; --bnb:rgba(107,119,115,.12); }
[data-theme="dark"] .bst-sec--passive, [data-theme="dark"] .bst-chip--passive{ --bn:#7BC75E; --bnb:rgba(123,199,94,.12); }
[data-theme="dark"] .bst-sec--neutre,  [data-theme="dark"] .bst-chip--neutre { --bn:#E8A93B; --bnb:rgba(232,169,59,.13); }
[data-theme="dark"] .bst-sec--hostile, [data-theme="dark"] .bst-chip--hostile{ --bn:#E06A5B; --bnb:rgba(224,106,91,.13); }
[data-theme="dark"] .bst-sec--boss,    [data-theme="dark"] .bst-chip--boss   { --bn:#9B7FD4; --bnb:rgba(155,127,212,.14); }
[data-theme="dark"] .bst-sec--avenir,  [data-theme="dark"] .bst-chip--avenir { --bn:#4FC3DE; --bnb:rgba(79,195,222,.13); }
[data-theme="dark"] .bst-sec--annonce, [data-theme="dark"] .bst-chip--annonce{ --bn:#93A09B; --bnb:rgba(147,160,155,.13); }

/* ---- Barre outils ---- */
.mcfr-bst .bst-tools{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:12px 0 14px; margin-bottom:6px;
  border-bottom:2px solid var(--bst-edge);
}
.mcfr-bst .bst-search{ position:relative; flex:1 1 220px; max-width:300px; color:var(--bst-muted); }
.mcfr-bst .bst-search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); pointer-events:none; }
.mcfr-bst .bst-q{
  width:100%; font:500 14px var(--mc-body, 'IBM Plex Sans', sans-serif); color:var(--bst-ink);
  background:var(--bst-surface) !important; border:2px solid var(--bst-edge) !important;
  border-radius:0 !important; box-shadow:3px 3px 0 rgba(0,0,0,.14);
  padding:8px 12px 8px 34px; outline:none;
}
.mcfr-bst .bst-q:focus{ border-color:var(--mc-tq-d, #11796A) !important; }
.mcfr-bst .bst-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.mcfr-bst .bst-chip{
  font:600 11.5px var(--mc-display, 'Space Grotesk', sans-serif); text-transform:uppercase;
  letter-spacing:.03em; cursor:pointer; padding:7px 11px;
  background:var(--bst-surface); color:var(--bst-ink);
  border:2px solid var(--bst-edge); border-radius:0; box-shadow:3px 3px 0 rgba(0,0,0,.14);
  display:inline-flex; align-items:center; gap:6px; line-height:1;
}
.mcfr-bst .bst-chip i{ width:9px; height:9px; background:var(--bn, var(--mc-tq, #1AA995)); flex:none; }
.mcfr-bst .bst-chip small{ font:600 10.5px var(--mc-body, sans-serif); color:var(--bst-muted); }
/* Hover : les styles boutons globaux (Customizer/Extra) passaient le texte en noir
   sur fond sombre — couleurs ré-assertées + vrai état de survol. */
.mcfr-bst .bst-chip:hover,
.mcfr-bst .bst-chip:focus-visible{
  color:var(--bst-ink) !important; background:var(--bst-soft) !important;
  border-color:var(--mc-tq-d, #11796A) !important;
}
.mcfr-bst .bst-chip:hover small{ color:var(--bst-muted) !important; }
.mcfr-bst .bst-chip.is-on,
.mcfr-bst .bst-chip.is-on:hover{ background:var(--bst-ink) !important; color:var(--mc-bg, #FBFAF7) !important; border-color:var(--bst-ink) !important; }
[data-theme="dark"] .mcfr-bst .bst-chip.is-on,
[data-theme="dark"] .mcfr-bst .bst-chip.is-on:hover{ background:var(--mc-ink, #EDEAE2) !important; color:#161D1B !important; border-color:var(--mc-ink, #EDEAE2) !important; }
.mcfr-bst .bst-chip.is-on small,
.mcfr-bst .bst-chip.is-on:hover small{ color:inherit !important; opacity:.7; }

/* ---- Secbar de section ---- */
.mcfr-bst .bst-secbar{
  display:flex; align-items:center; gap:11px; margin:34px 0 4px; scroll-margin-top:110px;
}
.mcfr-bst .bst-secbar i{ width:13px; height:13px; background:var(--bn); flex:none; }
.mcfr-bst .bst-secbar h2{
  font-family:var(--mc-display, 'Space Grotesk', sans-serif) !important;
  font-weight:700 !important; font-size:17px !important; text-transform:uppercase;
  letter-spacing:.04em; margin:0 !important; padding:0 !important; white-space:nowrap;
  color:var(--bst-ink) !important; border:0 !important;
}
.mcfr-bst .bst-cnt{ font:600 11.5px var(--mc-body, sans-serif); color:var(--bst-muted); white-space:nowrap; }
.mcfr-bst .bst-secbar::after{ content:""; flex:1; height:2px; background:var(--bst-edge); opacity:.25; }
.mcfr-bst .bst-desc{
  margin:0 0 14px !important; font-size:14px; line-height:1.55; color:var(--mc-ink-2, #3A4441);
}

/* ---- Liste compacte (variante B) ---- */
.mcfr-bst .bst-list{
  list-style:none !important; margin:0 !important; padding:0 !important;
  display:flex; flex-wrap:wrap; gap:8px;
}
.mcfr-bst .bst-list li{ margin:0 !important; padding:0 !important; list-style:none !important; }
.mcfr-bst .bst-list li::before{ content:none !important; }
.mcfr-bst .bst-c{
  display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 4px;
  background:var(--bst-surface); border:2px solid var(--bst-edge);
  border-left:4px solid var(--bn); box-shadow:3px 3px 0 rgba(0,0,0,.12);
  text-decoration:none !important; background-image:none !important;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
a.bst-c:hover{
  transform:translate(-1px,-1px); box-shadow:5px 5px 0 rgba(0,0,0,.16);
  border-color:var(--mc-tq-d, #11796A); border-left-color:var(--bn);
}
.mcfr-bst .bst-vig{
  width:32px; height:32px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--bnb, var(--bst-soft)); border:1px solid var(--bst-edge); overflow:hidden;
}
.mcfr-bst .bst-vig img{
  width:26px !important; height:26px !important; image-rendering:pixelated;
  border:0 !important; box-shadow:none !important; margin:0 !important; display:block;
}
.mcfr-bst .bst-name{
  font:700 13.5px/1.2 var(--mc-display, 'Space Grotesk', sans-serif); color:var(--bst-ink);
}
a.bst-c:hover .bst-name{ color:var(--mc-tq-d, #11796A); }
[data-theme="dark"] a.bst-c:hover .bst-name{ color:var(--mc-tq-l, #34CBB2); }
.mcfr-bst .bst-soon{ border-style:dashed; border-left-style:solid; box-shadow:none; opacity:.78; cursor:default; }
.mcfr-bst .bst-soon .bst-vig img{ opacity:.55; }

.mcfr-bst .bst-nores{ padding:26px 0; text-align:center; color:var(--bst-muted); font-size:14.5px; }
.mcfr-bst .bst-nores[hidden]{ display:none; }

/* ---- Responsive ---- */
@media (max-width:600px){
  .mcfr-bst .bst-search{ max-width:none; flex-basis:100%; }
  .mcfr-bst .bst-name{ font-size:13px; }
  .mcfr-bst .bst-c{ padding:3px 10px 3px 3px; gap:7px; }
  .mcfr-bst .bst-vig{ width:28px; height:28px; }
  .mcfr-bst .bst-vig img{ width:24px !important; height:24px !important; }
  /* secbar : titre + compteur tenaient pas en 390px (overflow 30px constaté en QA) */
  .mcfr-bst .bst-secbar{ gap:8px; }
  .mcfr-bst .bst-secbar h2{ font-size:14.5px !important; letter-spacing:.02em; }
  .mcfr-bst .bst-secbar i{ width:11px; height:11px; }
  .mcfr-bst .bst-cnt{ font-size:10.5px; }
}