.bestiary-section-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

.bestiary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Le nom passe à la ligne, À TOUTES LES LARGEURS. La règle vivait dans le bloc
   téléphone ci-dessous, et le nom restait donc coupé par les points de suspension de
   `.creature-card-name` sur écran d'ordinateur.
   POURQUOI L'ORDINATEUR EST LE PIRE CAS, ET NON LE TÉLÉPHONE. `.anima-main-content`
   plafonne à 900 px et la grille passe à DEUX pistes au-dessus de 767,98 px : la carte
   mesure 351 px à 768 et 417 px au-delà, contre 328 px à 360 px de fenêtre — mais le
   badge et le niveau prennent une part fixe de l'en-tête, si bien que la boîte du nom
   ne vaut plus que 171 px à 768 px et 237 px au-delà, contre toute la carte sur
   téléphone.
   MESURÉ en Chromium, vraies polices, chaîne de conteneurs décalquée, sur les
   168 créatures du bestiaire livré : AVANT, 115 noms sur 168 étaient coupés à 768 px et
   94 sur 168 à 1024, 1280 et 1920 px, jusqu'à 430 px de texte masqué à 768 px et 364 px
   au-delà pour le nom de 59 caractères. À 360 et 422 px, aucun — le bloc téléphone
   faisait déjà son travail. La coupure commençait à 17 caractères à 768 px et à 23
   au-delà.
   ET DEUX CRÉATURES DEVENAIENT INDISCERNABLES à 768 px : « Serpent Dégénéré (Majeur) »
   et « Serpent Dégénéré (Mineur) » d'un côté, « Chevalier du Vide (Préteur des
   Morts-Vivants) » et « Chevalier du Vide, Prétoire des Morts-Vivants » de l'autre,
   affichaient exactement le même texte.
   CE QUE ÇA COÛTE, relevé sur la même grille de 168 cartes : la hauteur totale passe de
   24 072 à 27 513 px à 768 px (+14,3 %) et à 26 084 px au-delà (+8,4 %) ; la rangée
   médiane passe de 269 à 323 px à 768 px et à 296 px au-delà, la carte la plus haute
   gagnant trois lignes de nom dans le pire cas. Une variante à deux lignes maximum
   (`line-clamp`) coûtait 8,0 % au lieu de 14,3 % mais laissait encore 60 noms coupés sur
   168 à 768 px : elle ne règle pas ce pour quoi on paie.
   Après, plus rien de masqué à aucune des six largeurs relevées, et aucune carte ne
   dépasse le bord droit du contenu.
   SUR TÉLÉPHONE la règle était déjà là, dans le bloc ci-dessous, et elle en sort sans
   rien changer : elle y répondait à la piste contrainte juste au-dessus, qui laissait
   453 px de texte masqué à 360 px pour ce même nom de 59 caractères et faisait passer la
   carte de 147 à 337 px de haut.
   `overflow-wrap: anywhere` couvre le nom d'un seul mot, qu'aucune césure de mot ne
   pourrait replier. Limité à la grille du bestiaire : c'est la seule des deux vues de
   `Summoning::CreatureCard` qui ait été mesurée. */
.bestiary-grid .creature-card-name {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  /* `minmax(0, 1fr)` et non `1fr` — la même précaution que la règle à deux colonnes
     ci-dessus, qui l'avait déjà. `1fr` seul vaut `minmax(auto, 1fr)` : le minimum de la
     piste est la taille minimale de la carte, et Chromium y fait entrer le nom en entier
     bien que `.creature-card-name` porte `min-width: 0`. La piste grossissait donc avec
     le nom et la carte sortait du contenu.
     MESURÉ sur téléphone : la carte dépassait le bord droit du contenu à partir de 20
     caractères à 360 px et de 26 à 422 px ; avec le nom le plus long du bestiaire livré
     (59 caractères), de 414 px à 360 et de 352 px à 422. Débordement SUBI, pas un
     tableau large qui défile dans sa boîte : rien n'y défile, c'est la page entière qui
     s'élargit — `window.innerWidth` passait de 360 à 774. À noter, `scrollWidth` ne
     voyait rien : il grandissait d'autant, donc `document.documentElement.scrollWidth
     - window.innerWidth` valait zéro des deux côtés du défaut.
     Après correction, `innerWidth` reste à la largeur demandée et la carte tient dans le
     contenu à toutes les longueurs relevées. */
  .bestiary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bestiary-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bestiary-card-actions {
  display: flex;
  gap: 0.4rem;
}

.bestiary-card-actions .btn {
  font-size: 0.8rem;
}

/* hidden native file input inside a label-styled button */
.bestiary-image-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.bestiary-image-btn {
  font-size: 0.8rem;
  margin-bottom: 0;
  cursor: pointer;
}

.bestiary-image-btn.disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* ---- Toolbar : recherche + tri ---- */
.bestiary-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.bestiary-search {
  flex: 1 1 240px;
  max-width: 420px;
  font-size: 0.85rem;
}

.bestiary-sort {
  flex: 0 0 auto;
  width: auto;
  min-width: 160px;
  font-size: 0.85rem;
}

/* ---- Creature detail sheet ---- */
.bestiary-sheet {
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  text-align: left;
}

.bestiary-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.bestiary-sheet-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: var(--accent);
  margin: 0;
}

.bestiary-sheet-level {
  color: var(--muted);
  font-size: 0.9rem;
}

.bestiary-sheet-img {
  max-width: 100%;
  max-height: 50vh;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: contain;
  margin: 0.75rem 0;
}

.bestiary-sheet-desc {
  white-space: pre-line;
  line-height: 1.5;
}

.bestiary-sheet-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--accent);
  margin: 1rem 0 0.5rem;
}

.bestiary-sheet-zeon {
  margin: 0.75rem 0 0;
}

.bestiary-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
  gap: 0.4rem;
}

.bestiary-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
}

.bestiary-stat-label {
  font-size: 0.8rem;
  opacity: 0.8;
}

.bestiary-stat-value {
  font-size: 1.1rem;
  font-weight: 600;
}

.bestiary-ability-list,
.bestiary-power-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bestiary-ability-item {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--border);
}

.bestiary-power-item {
  padding: 0.3rem 0;
  line-height: 1.4;
}

.bestiary-member-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bestiary-member-name {
  font-weight: 600;
}

.bestiary-empty {
  color: var(--muted);
  font-style: italic;
  font-size: 0.9rem;
}

/* ---- Creature Editor ---- */
.bestiary-editor-card {
  border-color: var(--border);
}

.bestiary-editor-header {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background-color: var(--surface);
  border-bottom-color: var(--border);
}

.bestiary-editor-section {
  margin-bottom: 1.5rem;
}

.bestiary-editor-section-title {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
  margin-bottom: 0.75rem;
}

.bestiary-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.bestiary-editor-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.bestiary-editor-label--checkbox {
  flex-direction: row;
  align-items: center;
  padding-top: 1.5rem;
  color: var(--muted);
}

.bestiary-required {
  color: var(--danger);
}

.bestiary-muted {
  font-size: 0.8rem;
  color: var(--muted);
}

.bestiary-editor-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

.bestiary-editor-row-select {
  flex: 1 1 auto;
  min-width: 100px;
}

.bestiary-editor-row-value {
  width: 80px;
  flex: 0 0 80px;
}

.bestiary-editor-row-remove {
  flex: 0 0 auto;
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
}

.bestiary-editor-footer {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}

.bestiary-editor-footer .btn {
  font-size: 0.85rem;
}

/* ---- Editor image section ---- */
.bestiary-editor-image-preview {
  display: block;
  max-width: 160px;
  max-height: 160px;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: cover;
  margin-bottom: 0.5rem;
}

.bestiary-editor-image-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.bestiary-editor-image-actions .btn {
  font-size: 0.8rem;
}