/* La parure de l ecran : betes. Cette feuille n habille que cet ecran.
   Le socle commun (cadre, banniere, rangee, sceau, jauge, vignette,
   parchemin, chemin, fanion) vit dans parure-socle.css. */

/* ─────────────────────────────────────────────────────────────────────────
   Deux planches sur une meme page.

   La bete, en haut : une colonne de fiche a gauche, la grande scene et la
   file des ages au centre, les capacites en medaillons et les ordres en
   lignes a chevron en dessous. Palette d'or et de sang.

   Le bestiaire, en dessous : la creature la plus lourde a gauche, son
   illustration au centre, ses capacites et ses faiblesses a droite, puis la
   bande du bas avec l'armee des morts, la marche des phases et la bete qui
   te suit. Palette de gel, bleu sur noir.
   ───────────────────────────────────────────────────────────────────────── */

#bestiaire {
  --gel:        var(--or-sourd);
  --gel-vif:    var(--texte);
  --gel-pale:   var(--parchemin-clair);
  --gel-fonce:  var(--fer-sombre);
  --gel-nuit:   var(--pierre-1);
}


/* ── La page entiere ─────────────────────────────────────────────────────
   Un fond de pierre presque noir, un lisere d'or, et de l'air entre les
   panneaux. Sans la grille, les six blocs se suivaient en une colonne de
   cinq mille pixels de haut. */

#bestiaire.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
  align-content: start;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--cire) 18%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 96%, transparent), color-mix(in srgb, var(--pierre-0) 97%, transparent));
  border-color: color-mix(in srgb, var(--or) 35%, transparent);
}

#bestiaire .dialogue__entete {
  grid-column: 1 / -1;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--or) 25%, transparent);
}

#bestiaire .dialogue__note {
  font-family: var(--police-corps);
  font-style: italic;
  color: var(--texte-pale);
}

#bestiaire .colonne__titre,
#bestiaire .parure__banniere {
  margin-top: 0;
}


/* ═════ La planche de la bete ════════════════════════════════════════════ */

.planche-bete {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
  padding: 0;
  border: 0;
  background: none;
}

.planche-bete__titre {
  grid-area: titre;
  justify-self: center;
  min-width: 14rem;
}

.planche-bete__fiche { grid-area: fiche; }
.planche-bete__centre { grid-area: centre; display: grid; gap: var(--e-3); align-content: start; }
.planche-bete__ordres { grid-area: ordres; }
.planche-bete__notes { grid-area: notes; }

/* Un bandeau de titre dans une colonne de vingt caracteres se serre : il
   garde une taille plus sage que le titre de la planche. */
.planche-bete .parure__banniere:not(.planche-bete__titre),
.planche-bestiaire .parure__banniere { font-size: var(--t-4); }

@media (min-width: 62rem) {
  .planche-bete {
    grid-template-columns: 20rem minmax(0, 1fr) 19rem;
    grid-template-areas:
      "titre titre  titre"
      "fiche centre ordres"
      "notes notes  notes";
    /* Chaque panneau s'arrete ou son contenu s'arrete. Tire a la meme hauteur,
       la colonne de gauche gardait deux cent soixante-dix pixels de vide. */
    align-items: start;
  }
}


/* ── La colonne de gauche ────────────────────────────────────────────────
   Le nom, le medaillon rond, les jauges, les affinites. La planche pose le
   dragon dans un disque cercle d'or, pas dans un rectangle. */

.planche-bete__fiche {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  padding: var(--e-4) var(--e-4) var(--e-4);
}

.planche-bete .bete__ligne {
  flex-direction: column;
  align-items: center;
  gap: var(--e-0);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 20%, transparent);
}

.planche-bete .bete__ligne > span:first-child {
  font-size: var(--t-6);
  letter-spacing: 0.05em;
  color: var(--or-vif);
  text-shadow: var(--ombre-texte);
}

.planche-bete .bete__rarete { color: var(--cire-vif); letter-spacing: 0.2em; }

/* Le medaillon. Le cadre carre de passe.css devient un disque : c'est le
   seul endroit de la planche ou la bete se lit en portrait. */
.planche-bete .bete__portrait {
  width: min(13rem, 78%);
  aspect-ratio: 1;
  min-height: 0;
  margin: var(--e-1) auto var(--e-1);
  padding: var(--e-1);
  border: 1px solid var(--or);
  border-radius: var(--rayon-rond);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--bois) 70%, transparent), color-mix(in srgb, var(--pierre-0) 96%, transparent) 72%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 90%, transparent),
    inset 0 0 26px color-mix(in srgb, var(--pierre-0) 85%, transparent),
    0 0 14px color-mix(in srgb, var(--or) 22%, transparent);
}

/* La taille de l'image dans le disque reste celle de passe.css : c'est elle
   qui raconte la croissance, du nouveau-ne a l'ancien. Rien ici ne touche a
   sa largeur, seulement a sa forme. */
.planche-bete .bete__portrait img { border-radius: var(--rayon-rond); }


/* L'age, sous le medaillon, la ou la planche le pose. */
.planche-bete__age {
  margin: 0 0 var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

.planche-bete .bete__temperament {
  margin: 0;
  font-family: var(--police-corps);
  font-style: italic;
  font-size: var(--t-2);
  line-height: 1.4;
  text-align: center;
  color: var(--texte-pale);
}


/* ── Les jauges de la fiche ──────────────────────────────────────────────
   Une ligne par mesure : une gravure, le mot, le rail quand la mesure se
   compte sur cent, le chiffre a droite. La grille a trois colonnes de la
   salle ecrasait sept mesures sur trois lignes illisibles. */

.planche-bete .jauges--bete {
  display: flex;
  flex-direction: column;
  gap: var(--e-0);
  margin: var(--e-1) 0 0;
}

.planche-bete .jauge-bete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-0);
  text-align: left;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
}

.planche-bete .jauge-bete--reprise { display: none; }

.planche-bete .jauge-bete dt {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  color: var(--texte-pale);
}

.jauge-bete__marque {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.jauge-bete__mot { flex: none; }

.planche-bete .jauge-bete--rail .jauge-bete__mot { min-width: 4.6rem; }

.planche-bete .jauge-bete .jauge-parure__rail {
  position: relative;
  display: block;
  flex: 1;
  min-width: 2.5rem;
  height: 0.5rem;
  background: color-mix(in srgb, var(--pierre-0) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
  overflow: hidden;
}

.planche-bete .jauge-bete .jauge-parure__part {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, var(--gain), var(--gain-fond));
  transition: width 420ms ease;
}

.planche-bete .jauge-bete--tiede .jauge-parure__part { background: linear-gradient(180deg, var(--alerte), var(--or-fonce)); }
.planche-bete .jauge-bete--basse .jauge-parure__part { background: linear-gradient(180deg, var(--cire-vif), var(--cire-fonce)); }
/* La traque monte quand ca va mal : elle garde le rouge a toute hauteur. */
.planche-bete .jauge-bete--danger .jauge-parure__part { background: linear-gradient(180deg, var(--cire-vif), var(--cire-fonce)); }

.planche-bete .jauge-bete dd {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  text-align: right;
  white-space: nowrap;
  color: var(--parchemin);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .planche-bete .jauge-bete .jauge-parure__part { transition: none; }
}


/* ── Les affinites ───────────────────────────────────────────────────────
   Trois lignes : ce que sa terreur retire en face, au champ, aux murs et
   contre les morts. */

.planche-bete__sous-titre {
  margin: var(--e-2) 0 var(--e-0);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--or);
}

.affinites {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-0);
}

.affinite {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-0);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 12%, transparent);
}

.affinite__marque {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: var(--cire-vif);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.affinite__mot { font-size: var(--t-2); color: var(--texte); }

.affinite__part {
  font-family: var(--police-titre);
  font-size: var(--t-2);
  color: var(--feu-lueur);
  font-variant-numeric: tabular-nums;
}


/* ── La scene et la file des ages ────────────────────────────────────────
   La planche montre la bete en grand, puis ses quatre ages relies par un
   trait d'or, l'age du jour allume. */

.planche-bete__scene {
  margin: 0;
  aspect-ratio: 16 / 9;
  min-height: 15rem;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.planche-bete__scene-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.planche-bete__ages {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--e-2);
  grid-auto-columns: minmax(6.5rem, 1fr);
}

/* Il n'existe pas d'image par age. La gravure porte donc l'etape a elle seule :
   elle est grande, et la pierre s'allume derriere elle. */
.planche-bete__ages .chemin__etape {
  align-items: center;
  padding: var(--e-4) var(--e-1) var(--e-3);
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--bois) 32%, transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 90%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
}

.chemin__marque {
  width: 2.1rem;
  height: 2.1rem;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

.planche-bete__ages .chemin__etape--courante .chemin__marque {
  stroke: var(--or-vif);
  opacity: 1;
}

/* Le trait d'or qui relie les ages. Un losange entre deux cases, comme sur
   la planche : sans lui, quatre cases se lisent comme quatre choix. */
.planche-bete__ages .chemin__etape + .chemin__etape::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.5rem;
  width: 0.5rem;
  height: 1px;
  background: color-mix(in srgb, var(--or) 45%, transparent);
}


/* ── Les capacites en medaillons ─────────────────────────────────────────
   Un disque de pierre cercle d'or, la gravure dedans, le nom et l'effet
   dessous. Une capacite que la bete n'a pas garde sa case, fermee. */

.planche-bete__capacites { padding: var(--e-4) var(--e-4) var(--e-4); }

.planche-bete .bete__capacites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--e-3);
  margin: 0;
  padding: 0;
}

.capacite {
  display: grid;
  justify-items: center;
  gap: var(--e-1);
  padding: var(--e-1);
  border: 0;
  text-align: center;
}

.capacite__disque {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border: 1px solid var(--or);
  border-radius: var(--rayon-rond);
  background: radial-gradient(circle at 38% 30%, var(--cuir), var(--pierre-1) 74%);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--pierre-0) 80%, transparent), 0 0 10px color-mix(in srgb, var(--or) 16%, transparent);
}

.capacite__marque {
  width: 1.7rem;
  height: 1.7rem;
  fill: none;
  stroke: var(--feu-lueur);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.capacite__nom {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  line-height: 1.2;
  color: var(--parchemin);
}

.capacite__dit {
  font-size: var(--t-1);
  line-height: 1.3;
  color: var(--texte-pale);
  font-variant-numeric: tabular-nums;
}

.capacite.est-fermee .capacite__disque {
  border-color: color-mix(in srgb, var(--or) 30%, transparent);
  background: radial-gradient(circle at 38% 30%, var(--pierre-3), var(--pierre-0) 74%);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--pierre-0) 80%, transparent);
}

.capacite.est-fermee .capacite__marque { stroke: var(--texte-pale); }
.capacite.est-fermee .capacite__nom { color: var(--texte-pale); }


/* ── Les ordres et les missions ──────────────────────────────────────────
   Des lignes pleine largeur : la gravure, le mot, sa phrase, le chevron.
   L'ordre du jour porte le rouge. */

.planche-bete__ordres { padding: var(--e-4) var(--e-3) var(--e-4); }

.planche-bete__ordres .parure__banniere { margin: 0 0 var(--e-2); }
.planche-bete__ordres .parure__banniere + * { margin-top: 0; }
.planche-bete__ordres > * + .parure__banniere { margin-top: var(--e-4); }

.planche-bete .bete__ordres,
.planche-bete .bete__roles {
  display: grid;
  gap: var(--e-1);
  margin: 0;
}

.planche-bete .rangee {
  align-items: flex-start;
  min-height: 3rem;
  border-radius: 0;
}

.planche-bete .rangee .rangee__mot { display: grid; gap: var(--e-0); }
.planche-bete .rangee strong { font-family: var(--police-titre); font-weight: 400; letter-spacing: 0.03em; }
.planche-bete .rangee .rangee__marque { margin-top: var(--e-0); }
.planche-bete .rangee .rangee__chevron { margin-top: var(--e-2); fill: none; }

.planche-bete .rangee.est-actif .rangee__marque { stroke: var(--or-vif); }

.planche-bete .bete__monture {
  margin: var(--e-2) 0 0;
  font-size: var(--t-2);
  line-height: 1.4;
}

/* Chaque ligne fermee porte deja sa cause sous son nom, au doigt comme a la
   souris. Le rappel qui suivait la pile repetait les trois memes phrases. */
.planche-bete .bete__aide { display: none; }



/* ── Les notes du dragon ─────────────────────────────────────────────────
   Ce qu'il mange, ce qu'il fait peur, ce qu'il risque, ce qu'il coute chez
   les voisins. La planche pose ce bloc en bas, sur toute la largeur. */

.planche-bete__notes { padding: var(--e-4) var(--e-4) var(--e-4); }

.planche-bete__notes .parure__banniere { margin-bottom: var(--e-2); }

/* Le texte se range en colonnes de vingt caracteres de large. Une phrase ne se
   coupe jamais entre deux colonnes. */
.planche-bete__notes-texte { columns: 21rem; column-gap: var(--e-6); }

.planche-bete__notes-texte > * { break-inside: avoid; }

.planche-bete__notes-texte > p { margin: var(--e-1) 0 var(--e-2); font-size: var(--t-2); line-height: 1.45; }

.planche-bete__notes-texte > p:first-child { margin-top: 0; }

.planche-bete .bete__sous-titre {
  margin: var(--e-1) 0 var(--e-0);
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  color: var(--or);
}

/* La liste des voisins defile. Le degrade du bas dit qu'il en reste dessous :
   coupee net, elle passait pour la fin de la liste. */
.planche-bete .bete__voisins {
  max-height: 10.5rem;
  overflow-y: auto;
  padding-right: var(--e-2);
  font-size: var(--t-2);
  scrollbar-width: thin;
  mask-image: linear-gradient(180deg, var(--pierre-0) 84%, transparent);
  -webkit-mask-image: linear-gradient(180deg, var(--pierre-0) 84%, transparent);
}


/* ═════ La planche du bestiaire ══════════════════════════════════════════ */

/* 🔴 Le 16/09/2026, la page « Ton dragon » ne portait plus que le dragon : le
   sang est passe dans « Ta famille », les creatures affrontees et leur marche
   des phases dans « La Longue Nuit ». Sa grille suit. */
/* Le relief garde sa hauteur : sans cela, la grille l'étirait sur toute la
   colonne des chemins, qui fait plus de douze cents pixels, et la bête se
   perdait au milieu d'un rectangle vide. */
/* 🔴 Le relief prend TOUTE la largeur de la page, et la bride de 62rem est
   levée. Le propriétaire, le 16/09/2026 : « y suffit d'augmenter la taille du
   cadre ». Il a raison, et c'est la largeur qui commande : le recul de la
   caméra est calculé pour que l'envergure tienne dans le cadre, donc un cadre
   plus large rend une bête plus grande en pixels, à part de hauteur inchangée.
   Le relief tenait deux colonnes sur trois, soit 950 pixels sur les 1 440 de
   la page, et la bête faisait 164 pixels de haut. */
/* 🔴 Une seule colonne, dans l'ordre du document, à toutes les largeurs.
   Les zones nommées ne suivaient plus la page (relevé du 22/09/2026). Celles
   du téléphone citaient six blocs partis dans la Longue Nuit et chez les
   compagnons, et oubliaient le relief et la voie, qui ouvraient des colonnes
   implicites : le texte tenait dans 70 pixels, un mot par ligne. Celles de
   l'ordinateur posaient chaque bloc sur les trois colonnes, donc une seule,
   et la cartouche de première visite tombait dans la case vide de « suit »,
   sous la fiche de la bête.

   🔴 Et chaque rangée prend la hauteur de son contenu. La page est un panneau
   de hauteur fixe qui défile : une rangée `auto` n'y grandit que dans la place
   restante, et le relief, en `overflow: hidden`, ne réclamait que son
   `min-height` (304 pixels) pour 794 dessinés. « Comment avoir un dragon »
   passait sous la bête, les ailes sur les œufs. */
#bestiaire.page { grid-auto-rows: max-content; }
#bestiaire #dragon-relief { align-self: start; margin-inline: auto; width: 100%; }

/* La planche des creatures est maintenant dans la Longue Nuit. Les trois
   panneaux tiennent sur une bande, la liste des affrontees dessous. */
@media (min-width: 62rem) {
  /* Sans grille, l'illustration prenait toute la largeur : 512 pixels tirés à
     1 355 et rognés au torse. */
  #nuit-creature-en-avant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr);
    gap: var(--e-3);
    align-items: start;
  }

  #nuit .planche-bestiaire__fiche,
  #nuit .planche-bestiaire__scene,
  #nuit .planche-bestiaire__traits {
    display: block;
  }

  #nuit #affrontees-bloc { margin-top: var(--e-4); }
}


/* ═════ Le dragon en relief ═══════════════════════════════════════════════
   Le modele du mod, 8 866 triangles, en rotation lente. Sans bete, il est en
   ombre : le joueur voit ce qu'il n'a pas. */

.dragon-relief {
  position: relative;
  margin: 0;
  min-height: 19rem;
  border: 1px solid color-mix(in srgb, var(--or-sourd) 34%, transparent);
  border-radius: var(--rayon-case);
  background:
    radial-gradient(120% 80% at 50% 12%, color-mix(in srgb, var(--feu) 9%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 94%, transparent), color-mix(in srgb, var(--pierre-0) 97%, transparent));
  overflow: hidden;
}

/* 🔴 Deux relevés du propriétaire le 16/09/2026 : « tjr pas », capture à
   l'appui, puis « y suffit d'augmenter la taille du cadre ». Il a raison, et
   c'est la HAUTEUR du cadre qui commande, pas sa largeur.
   Cinq formats ont été mesurés au banc `tools/_prise-du-dragon.mjs`. La bête
   fait 93 pixels de haut dans un cadre de 1 400 sur 387, 135 dans 1 400 sur
   560, 178 dans 1 400 sur 760 ; et 128 dans 1 000 sur 560 contre 135 dans
   1 400 sur 560, donc la largeur ne change presque rien. Au-delà de 760 le
   gain s'arrête, parce que le recul remonte.
   74vh sur une fenêtre de 880 donnent 651 pixels de cadre, et la bête 169 de
   haut pour 972 d'envergure. Elle en faisait 122 et 536.

   🔴 Le 16/09/2026, deux changements ont repris la mesure. Le dièdre relève les
   ailes, donc la bête est plus haute et se voit de plus loin ; et `reculDuNuage`
   comptait la hauteur depuis le point d'attache de la bête pendant que la
   caméra visait le centre de sa boîte, donc il réservait la place d'une bête
   deux fois trop haute. Les deux corrigés, la hauteur du cadre redevient
   payante : 651 pixels de cadre donnent 242 de bête, 722 en donnent 272, 774
   en donnent 288, 950 en donnent 353.

   La hauteur est 88vh, soit 774 sur une fenêtre de 880. À 82vh le banc rougit
   deux fois : 840 pixels d'envergure au lieu des 900 qu'il exige, et le corps
   juste sous son cinquième de la largeur. */
.dragon-relief__toile {
  width: 100%;
  height: clamp(26rem, 88vh, 58rem);
}

/* 🔴 Au telephone, 88vh sur 358 pixels de large donnent un cadre de 0,48 de
   rapport, et `dragon3d.js` borne le rapport a 0,6 pour calculer le recul :
   la bete etait cadree pour un cadre plus large que le vrai, et ses ailes
   sortaient par le cote (releve du 22/09/2026). Un cadre de quatre sur cinq
   reste au-dessus de la borne. */
@media (max-width: 42rem) {
  .dragon-relief__toile {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 72vh;
  }
}

/* La vue se tourne au doigt et a la souris. `touch-action` et `cursor` sont
   poses par `jeu/ecrans/prise-du-dragon.js`, qui les tient avec le geste ;
   ici on empeche seulement la selection du texte pendant un glissement, et on
   retire le liseré de focus au clic tout en le gardant au clavier. */
.dragon-relief__toile,
.etal-relief__toile {
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.dragon-relief__toile:focus-visible,
.etal-relief__toile:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--or) 80%, transparent);
  outline-offset: -2px;
}

.dragon-relief__prise {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  z-index: 2;
  max-width: 14rem;
  margin: 0;
  padding: var(--e-1) var(--e-2);
  border: 1px solid color-mix(in srgb, var(--or-sourd) 22%, transparent);
  border-radius: var(--rayon);
  font-size: var(--t-1);
  line-height: 1.4;
  text-align: right;
  color: color-mix(in srgb, var(--parchemin) 66%, transparent);
  background: color-mix(in srgb, var(--pierre-0) 62%, transparent);
  pointer-events: none;
}

@media (max-width: 40rem) {
  .dragon-relief__prise { max-width: 11rem; font-size: var(--t-1); }
}

.dragon-relief__canvas,
.etal-relief__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.dragon-relief__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-0);
  padding: var(--e-3) var(--e-4);
  background: linear-gradient(0deg, color-mix(in srgb, var(--pierre-0) 90%, transparent), transparent);
}

.dragon-relief__nom {
  font-size: var(--t-3);
  letter-spacing: 0.06em;
  color: var(--or, var(--or-vif));
}

.dragon-relief__dit {
  font-size: var(--t-2);
  line-height: 1.45;
  color: color-mix(in srgb, var(--parchemin) 82%, transparent);
}


/* ═════ Les deux chemins vers un dragon adulte ════════════════════════════ */

.voie {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-4) var(--e-4);
  border: 1px solid color-mix(in srgb, var(--or-sourd) 30%, transparent);
  border-radius: var(--rayon-case);
  background: color-mix(in srgb, var(--pierre-1) 72%, transparent);
}

.voie__dit {
  margin: 0;
  font-size: var(--t-2);
  line-height: 1.5;
  color: color-mix(in srgb, var(--parchemin) 84%, transparent);
}

.voie__chemins,
.voie__faits {
  margin: 0;
  padding: 0;
  list-style: none;
}

.voie__chemins { display: flex; flex-direction: column; gap: var(--e-2); }

.voie__chemin {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-3);
  border: 1px solid color-mix(in srgb, var(--or-sourd) 22%, transparent);
  border-radius: var(--rayon-case);
  background: color-mix(in srgb, var(--pierre-2) 60%, transparent);
}

.voie__chemin.est-fermee { opacity: 0.66; }

.voie__disque {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid color-mix(in srgb, var(--or-sourd) 42%, transparent);
  border-radius: var(--rayon-rond);
  background: color-mix(in srgb, var(--pierre-0) 80%, transparent);
}

.voie__marque {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: var(--or, var(--or-vif));
  stroke-width: 1.5;
}

.voie__corps { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }

.voie__nom {
  font-size: var(--t-3);
  letter-spacing: 0.04em;
  color: var(--or, var(--or-vif));
}

.voie__phrase {
  margin: 0;
  font-size: var(--t-2);
  line-height: 1.5;
  color: color-mix(in srgb, var(--parchemin) 82%, transparent);
}

.voie__lignes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-2);
  margin: var(--e-0) 0 0;
  padding: 0;
  list-style: none;
}

.voie__fait {
  font-size: var(--t-1);
  line-height: 1.5;
  color: color-mix(in srgb, var(--texte) 78%, transparent);
}

.voie__lignes .voie__fait + .voie__fait::before {
  content: "·";
  margin-right: var(--e-2);
  color: color-mix(in srgb, var(--or-sourd) 60%, transparent);
}

.voie__fait.est-manquant { color: var(--perte); }

.voie__faits { display: flex; flex-direction: column; gap: var(--e-1); }

.voie__aller {
  align-self: flex-start;
  margin-top: var(--e-1);
  padding: var(--e-2) var(--e-4);
  font-size: var(--t-2);
  letter-spacing: 0.05em;
  color: var(--pierre-2);
  background: linear-gradient(180deg, var(--or-vif), var(--or-sourd));
  border: 1px solid color-mix(in srgb, var(--bois) 80%, transparent);
  border-radius: var(--rayon);
  cursor: pointer;
}

.voie__aller:hover { filter: brightness(1.08); }
.voie__aller:disabled { opacity: 0.6; cursor: progress; }


/* ═════ La piste d'un dragon sans cavalier (8 octobre 2026) ═══════════════
   La bête peinte à gauche, ses faits et les deux gestes à droite. Le liseré
   prend la couleur de sa rareté. Au téléphone, la peinture passe au-dessus. */

.piste-dragon {
  --piste-rarete: var(--or-sourd);
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
  gap: var(--e-4);
  margin: 0 0 var(--e-4);
  padding: var(--e-3);
  border: 1px solid color-mix(in srgb, var(--piste-rarete) 70%, transparent);
  border-radius: var(--rayon-case);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-1) 88%, transparent), color-mix(in srgb, var(--pierre-0) 92%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pierre-0) 70%, transparent), 0 6px 18px rgb(0 0 0 / 0.35);
}
.piste-dragon[hidden] { display: none; }
.piste-dragon[data-rarete="rare"] { --piste-rarete: #6f8fb8; }
.piste-dragon[data-rarete="epique"] { --piste-rarete: #9a6bc0; }
.piste-dragon[data-rarete="legendaire"] { --piste-rarete: var(--or-vif); }

.piste-dragon__portrait {
  margin: 0;
  align-self: start;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--piste-rarete) 60%, transparent);
  border-radius: var(--rayon-case);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pierre-0) 85%, transparent), 0 0 22px color-mix(in srgb, var(--piste-rarete) 30%, transparent);
}
.piste-dragon__portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }

.piste-dragon__corps { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }

.piste-dragon__titre {
  margin: 0;
  font-size: var(--t-4);
  letter-spacing: 0.05em;
  color: var(--or, var(--or-vif));
}

.piste-dragon__nom {
  margin: 0;
  font-size: var(--t-3);
  color: color-mix(in srgb, var(--piste-rarete) 70%, var(--parchemin));
}

.piste-dragon__faits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--e-1) var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.piste-dragon__fait {
  font-size: var(--t-2);
  line-height: 1.45;
  color: color-mix(in srgb, var(--parchemin) 86%, transparent);
}
.piste-dragon__fait::before {
  content: "◆";
  margin-right: var(--e-1);
  font-size: 0.7em;
  color: color-mix(in srgb, var(--piste-rarete) 80%, transparent);
}
.piste-dragon__fait.est-manquant { color: var(--perte); }
.piste-dragon__fait--chance { font-size: var(--t-3); color: var(--parchemin); }

.piste-dragon__gestes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-1); }

.piste-dragon__vendre {
  padding: var(--e-2) var(--e-4);
  font-size: var(--t-2);
  letter-spacing: 0.04em;
  color: var(--parchemin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bois) 90%, black), color-mix(in srgb, var(--bois) 60%, black));
  border: 1px solid color-mix(in srgb, var(--or-sourd) 60%, transparent);
  border-radius: var(--rayon);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 2px 4px rgb(0 0 0 / 0.4);
  cursor: pointer;
}
.piste-dragon__vendre:hover:not(:disabled) { filter: brightness(1.12); }
.piste-dragon__vendre:active:not(:disabled) { transform: translateY(1px); }
.piste-dragon :is(.piste-dragon__vendre, .piste-dragon__reclamer):disabled { opacity: 0.55; cursor: not-allowed; }

.piste-dragon .piste-dragon__refus { display: block; margin: 0; color: var(--perte); font-size: var(--t-2); }
.piste-dragon .piste-dragon__refus[hidden] { display: none; }
.piste-dragon__issue { margin: 0; font-size: var(--t-2); color: var(--parchemin); }
.piste-dragon__issue[hidden] { display: none; }

@media (max-width: 40rem) {
  .piste-dragon { grid-template-columns: minmax(0, 1fr); }
  .piste-dragon__portrait { max-width: 16rem; justify-self: center; width: 100%; }
  .piste-dragon__faits { grid-template-columns: minmax(0, 1fr); }
  .piste-dragon__gestes > * { flex: 1 1 100%; }
}


/* ═════ L'etal de la boutique ═════════════════════════════════════════════ */

.etal-relief {
  position: relative;
  margin: 0 0 var(--e-4);
  border: 1px solid color-mix(in srgb, var(--or-sourd) 30%, transparent);
  border-radius: var(--rayon-case);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 94%, transparent), color-mix(in srgb, var(--pierre-0) 97%, transparent));
  overflow: hidden;
}

/* 🔴 Un bandeau large et bas ecrase le corps de la bete. Sur un cadre plat,
   c'est la hauteur qui limite le recul, et le corps ne fait plus que 40 % de
   la largeur : c'est ce que le proprietaire a vu le 16/09/2026 sur la
   boutique. Le cadre est donc plafonne en largeur et grandi en hauteur, ce qui
   ramene son rapport sous 2,4 et rend la main au terme du corps. */
.etal-relief { max-width: 68rem; margin-inline: auto; }
.etal-relief__toile { width: 100%; height: clamp(19rem, 52vh, 32rem); }

.etal-relief__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-2);
  letter-spacing: 0.05em;
  color: var(--or, var(--or-vif));
  background: linear-gradient(0deg, color-mix(in srgb, var(--pierre-0) 90%, transparent), transparent);
}

.article--dragon { cursor: pointer; }
.article--dragon:hover,
.article--dragon:focus-within { border-color: color-mix(in srgb, var(--or) 70%, transparent); }


/* ── La fiche de la creature ─────────────────────────────────────────────
   Le gel de la planche : bleu pale sur noir bleute, le nom en grand, la
   description dessous, les mesures en losanges. */

.planche-bestiaire__fiche,
.planche-bestiaire__traits,
.planche-bestiaire__phases,
#bestiaire #suivante,
#bestiaire #affrontees-bloc {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 96%, transparent), color-mix(in srgb, var(--pierre-0) 98%, transparent));
}

.planche-bestiaire__fiche {
  position: relative;
  display: grid;
  gap: var(--e-2);
  align-content: start;
  overflow: hidden;
  padding: var(--e-4) var(--e-4) var(--e-4);
}

/* La creature en ombre derriere sa fiche. Elle s'efface vers le haut pour
   laisser le nom lisible, et ne prend aucun clic. */
.planche-bestiaire__ombre {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 118%;
  max-width: none;
  transform: translateX(-50%);
  opacity: 0.2;
  filter: grayscale(0.6) brightness(0.8) contrast(1.1);
  mask-image: linear-gradient(180deg, transparent, var(--pierre-0) 55%);
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--pierre-0) 55%);
  pointer-events: none;
}

.planche-bestiaire__fiche > *:not(.planche-bestiaire__ombre) { position: relative; }

.planche-bestiaire__nom {
  margin: 0;
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  color: var(--gel-pale);
  text-shadow: 0 0 18px color-mix(in srgb, var(--or-sourd) 35%, transparent), var(--ombre-texte);
}

.planche-bestiaire__rang {
  margin: 0;
  padding-bottom: var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--gel);
  border-bottom: 1px solid color-mix(in srgb, var(--or-sourd) 30%, transparent);
}

.planche-bestiaire__dit {
  margin: 0;
  font-family: var(--police-corps);
  font-size: var(--t-3);
  line-height: 1.55;
  color: var(--texte);
}

.notes-creature {
  list-style: none;
  margin: var(--e-1) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e-0);
}

.note-creature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-0);
  border-bottom: 1px solid color-mix(in srgb, var(--or-sourd) 16%, transparent);
}

.note-creature__marque {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: var(--gel);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.note-creature__mot {
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or-sourd);
}

.note-creature__valeur {
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--gel-pale);
  font-variant-numeric: tabular-nums;
}


/* ── La grande illustration ──────────────────────────────────────────────
   Le centre de la planche. Cadre d'or, fond de pierre, legende dessous. */

.planche-bestiaire__scene {
  margin: 0;
  min-height: 14rem;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border-color: color-mix(in srgb, var(--or-sourd) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or-sourd) 22%, transparent), inset 0 0 40px color-mix(in srgb, var(--pierre-0) 85%, transparent);
}

/* Les fiches sont carrées, 512 pixels : l'image s'affiche entière, sans
   dépasser sa définition. */
.planche-bestiaire__scene-image {
  display: block;
  width: 100%;
  max-width: 512px;
  height: auto;
  aspect-ratio: 1;
  margin-inline: auto;
  object-fit: contain;
}

.planche-bestiaire__scene .vignette__legende {
  font-family: var(--police-titre);
  letter-spacing: 0.1em;
  color: var(--gel-pale);
  background: color-mix(in srgb, var(--pierre-0) 90%, transparent);
  border-top-color: color-mix(in srgb, var(--or-sourd) 30%, transparent);
}


/* ── Ses capacites et ses faiblesses ─────────────────────────────────────
   Deux piles de lignes a medaillon, sur le meme gabarit que les ordres du
   dragon. Une ligne qui n'est pas un bouton ne fait pas semblant de l'etre. */

/* Les deux piles s'arretent sur le dernier trait releve. Tirees jusqu'en bas de
   la bande, elles gardaient deux cents pixels de vide sous une seule ligne. */
.planche-bestiaire__traits {
  padding: var(--e-4) var(--e-3) var(--e-4);
  align-self: start;
  align-content: start;
}

.planche-bestiaire__traits .parure__banniere {
  margin: 0 0 var(--e-2);
  color: var(--gel-pale);
  background: linear-gradient(180deg, var(--verredragon), var(--pierre-1));
  border-color: color-mix(in srgb, var(--or-sourd) 45%, transparent);
}

.planche-bestiaire__traits .parure__banniere::before,
.planche-bestiaire__traits .parure__banniere::after { background: var(--gel); }

.planche-bestiaire__traits > .rangees + .parure__banniere { margin-top: var(--e-4); }

.rangees {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-1);
}

.rangee--fixe {
  align-items: flex-start;
  cursor: default;
  color: var(--parchemin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 90%, transparent), color-mix(in srgb, var(--pierre-0) 90%, transparent));
  border-color: color-mix(in srgb, var(--or-sourd) 28%, transparent);
}

.rangee--fixe:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 90%, transparent), color-mix(in srgb, var(--pierre-0) 90%, transparent));
  border-color: color-mix(in srgb, var(--or-sourd) 28%, transparent);
}

/* Le medaillon de la ligne : un disque de gel cercle, la gravure au centre. */
.rangee__medaille {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--or-sourd) 55%, transparent);
  border-radius: var(--rayon-rond);
  background: radial-gradient(circle at 38% 30%, var(--cuir), var(--pierre-0) 76%);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--pierre-0) 80%, transparent), 0 0 10px color-mix(in srgb, var(--or-sourd) 20%, transparent);
}

.rangee--fixe .rangee__medaille { margin-top: var(--e-0); }

.rangee--fixe .rangee__marque { stroke: var(--gel-vif); width: 1.25rem; height: 1.25rem; }
.rangee--fixe .rangee__mot { display: grid; gap: var(--e-0); }
.rangee--fixe strong { font-family: var(--police-titre); font-weight: 400; color: var(--gel-pale); }
.rangee--fixe .rangee__dit { color: var(--or-sourd); line-height: 1.35; }

/* La planche separe les deux piles par la couleur du cercle. Le gel entoure ce
   qui sert la creature, l'or entoure ce qui la tue. */
#creature-faiblesses .rangee__medaille {
  border-color: color-mix(in srgb, var(--or) 60%, transparent);
  background: radial-gradient(circle at 38% 30%, var(--cuir), var(--pierre-0) 76%);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--pierre-0) 80%, transparent), 0 0 10px color-mix(in srgb, var(--or) 20%, transparent);
}

#creature-faiblesses .rangee__marque { stroke: var(--or-vif); }

.rangee--vide {
  display: block;
  min-height: 0;
  padding: var(--e-2) var(--e-3);
  font-family: var(--police-corps);
  font-style: italic;
  color: var(--fer);
  cursor: default;
  background: none;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--or-sourd) 22%, transparent);
}


/* ── La marche des sept nuits ────────────────────────────────────────────
   La meme file que les ages du dragon, en gel, avec la vue peinte de chaque
   phase. */

.planche-bestiaire__phases {
  padding: var(--e-4) var(--e-3) var(--e-4);
  align-content: start;
}

.planche-bestiaire__phases .parure__banniere {
  margin: 0 0 var(--e-2);
  color: var(--gel-pale);
  background: linear-gradient(180deg, var(--verredragon), var(--pierre-1));
  border-color: color-mix(in srgb, var(--or-sourd) 45%, transparent);
}

.planche-bestiaire__phases .parure__banniere::before,
.planche-bestiaire__phases .parure__banniere::after { background: var(--gel); }

/* Les sept nuits ne tiennent pas sur une ligne dans un tiers de page : elles
   passent a la ligne au lieu de defiler derriere un bord. */
.planche-bestiaire__marche {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  overflow-x: visible;
}

.planche-bestiaire__marche .chemin__etape {
  gap: var(--e-1);
  padding: var(--e-1) var(--e-1);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 90%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border-color: color-mix(in srgb, var(--or-sourd) 22%, transparent);
}

.planche-bestiaire__marche .chemin__etape--atteinte { border-color: color-mix(in srgb, var(--or-sourd) 50%, transparent); }

.planche-bestiaire__marche .chemin__etape--courante {
  border-color: var(--gel-vif);
  box-shadow: 0 0 12px color-mix(in srgb, var(--or-sourd) 35%, transparent);
}

.planche-bestiaire__marche .chemin__nom {
  font-size: var(--t-2);
  line-height: 1.2;
  color: var(--gel-pale);
}

.chemin__vue {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--or-sourd) 28%, transparent);
}

.planche-bestiaire__phase-dit {
  margin: var(--e-2) 0 0;
  font-family: var(--police-corps);
  font-size: var(--t-2);
  line-height: 1.5;
  color: var(--parchemin-bas);
}


/* ── Ce qui te suit ──────────────────────────────────────────────────────
   Une image et deux lignes, a la place de quatre phrases nues. */

#bestiaire #suivante {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  padding: var(--e-4) var(--e-3) var(--e-4);
  border-radius: 0;
}

#bestiaire #suivante .parure__banniere {
  margin: 0;
  color: var(--gel-pale);
  background: linear-gradient(180deg, var(--verredragon), var(--pierre-1));
  border-color: color-mix(in srgb, var(--or-sourd) 45%, transparent);
}

#bestiaire #suivante .parure__banniere::before,
#bestiaire #suivante .parure__banniere::after { background: var(--gel); }

.planche-bestiaire__suivante-vue {
  margin: 0 0 var(--e-2);
  aspect-ratio: 16 / 9;
  border-color: color-mix(in srgb, var(--or-sourd) 50%, transparent);
}

.planche-bestiaire__suivante-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

#bestiaire .suivante__dit { margin: 0; color: var(--texte); }
#bestiaire .suivante__cout { margin: 0; color: var(--feu-lueur); }
#bestiaire .suivante__apport { margin: 0; color: var(--gel-vif); }


/* ── Ton sang ────────────────────────────────────────────────────────────*/

#bestiaire #sang { padding: var(--e-4) var(--e-4) var(--e-4); }
#bestiaire #sang .parure__banniere { margin: 0 0 var(--e-2); }
#bestiaire .sang__dit { margin: 0; font-family: var(--police-corps); line-height: 1.55; }


/* ── L'armee des morts et les betes a lier ───────────────────────────────
   Des vignettes cerclees d'or, le nom sous l'image, sa force en dessous.
   Une case fermee dit sa cause : c'est la seule chose qui la separe d'une
   collection a remplir. */

#bestiaire #affrontees-bloc,
#bestiaire #alier-bloc {
  padding: var(--e-4) var(--e-4) var(--e-4);
  margin-bottom: 0;
}

/* Le bloc des morts couvre deux colonnes et deux rangees. Tire jusqu'en bas de
   la bande, il gardait deux cents pixels de vide sous ses vignettes. */
#bestiaire #affrontees-bloc { align-self: start; }

#bestiaire #affrontees-bloc .parure__banniere,
#bestiaire #alier-bloc .parure__banniere { margin: 0 0 var(--e-3); }

#bestiaire #affrontees-bloc .parure__banniere {
  color: var(--gel-pale);
  background: linear-gradient(180deg, var(--verredragon), var(--pierre-1));
  border-color: color-mix(in srgb, var(--or-sourd) 45%, transparent);
}

#bestiaire #affrontees-bloc .parure__banniere::before,
#bestiaire #affrontees-bloc .parure__banniere::after { background: var(--gel); }

#bestiaire .bestiaire {
  margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--e-2);
}

#bestiaire #alier-bloc .bestiaire { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--e-3); }

#bestiaire .fiche {
  gap: var(--e-1);
  padding: var(--e-2);
  border-radius: 0;
  border-color: color-mix(in srgb, var(--or) 22%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 90%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
}

.fiche__vue {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

#bestiaire #affrontees-bloc .fiche__vue { aspect-ratio: 3 / 4; }

#bestiaire .fiche__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#bestiaire .fiche__nom {
  padding-top: var(--e-0);
  font-size: var(--t-3);
  text-align: center;
  color: var(--or-vif);
}

.fiche__force {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--gel);
  font-variant-numeric: tabular-nums;
}

#bestiaire #affrontees-bloc .fiche {
  border-color: color-mix(in srgb, var(--or-sourd) 25%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 90%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
}

#bestiaire #affrontees-bloc .fiche__nom { color: var(--gel-pale); }
#bestiaire #affrontees-bloc .fiche__vue { border-color: color-mix(in srgb, var(--or-sourd) 45%, transparent); }
#bestiaire #affrontees-bloc .fiche__dit { color: var(--or-sourd); font-size: var(--t-2); }

#bestiaire .fiche__dit { font-size: var(--t-2); line-height: 1.4; }

/* Les traits releves sur une creature affrontee restent des mots poses. Le
   rouge est garde pour les lignes ou le joueur doit agir. */
#bestiaire #affrontees-bloc .fiche__traits li {
  color: var(--gel-pale);
  background: color-mix(in srgb, var(--pierre-2) 80%, transparent);
  border-color: color-mix(in srgb, var(--or-sourd) 35%, transparent);
  border-radius: 0;
}

#bestiaire .fiche.est-fermee {
  border-style: solid;
  border-color: color-mix(in srgb, var(--fer) 30%, transparent);
}

#bestiaire .fiche.est-fermee .fiche__vue { filter: grayscale(0.85) brightness(0.5); }

#bestiaire .fiche__etat {
  margin-top: auto;
  padding-top: var(--e-1);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.05em;
  color: var(--texte-pale);
  border-top: 1px solid color-mix(in srgb, var(--or) 14%, transparent);
}

#bestiaire .fiche.est-liee .fiche__etat { color: var(--or-vif); }

/* La regle de l'ecran, sous le titre. Fer et pierre, comme les verrous des
   autres pages : ce n'est pas un refus, le joueur n'a rien tente. */
#bestiaire #alier-regle {
  margin: var(--e-2) 0 0;
  padding: var(--e-2) var(--e-3);
  font-family: var(--police-corps);
  font-size: var(--t-2);
  line-height: 1.45;
  color: var(--parchemin);
  background: color-mix(in srgb, var(--verredragon) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--or-sourd) 32%, transparent);
  border-left: 3px solid var(--or-sourd);
}

/* Le geste de liaison. Il prend la place que `fiche__etat` tenait sur une fiche
   ouverte : en bas de carte, la meme barre de separation, mais cliquable. */
#bestiaire .fiche__lier {
  margin-top: auto;
  padding: var(--e-2) var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: 0.04em;
  color: var(--or-vif);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 90%, transparent), color-mix(in srgb, var(--pierre-3) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 42%, transparent);
  border-radius: 0;
  cursor: pointer;
}

#bestiaire .fiche__lier:hover,
#bestiaire .fiche__lier:focus-visible {
  color: var(--parchemin);
  border-color: var(--or);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bois) 95%, transparent), color-mix(in srgb, var(--bois-sombre) 98%, transparent));
}

#bestiaire .fiche__lier[disabled] {
  color: var(--texte-pale);
  background: none;
  border-color: color-mix(in srgb, var(--or) 14%, transparent);
  border-width: 1px 0 0;
  cursor: default;
}

#bestiaire .reste-a-voir {
  margin: var(--e-3) 0 0;
  font-family: var(--police-corps);
  font-style: italic;
  color: var(--or-sourd);
}


/* ── Le telephone ────────────────────────────────────────────────────────
   Une seule colonne, la fiche du dragon d'abord, la scene ensuite. Les
   files d'etapes defilent au doigt au lieu de se serrer. */

@media (max-width: 61.9375rem) {
  .planche-bete {
    grid-template-areas:
      "titre"
      "fiche"
      "centre"
      "ordres"
      "notes";
  }

  .planche-bete .bete__portrait { margin-bottom: var(--e-1); }

  .planche-bete .bete__portrait { width: min(11rem, 62%); }

  #bestiaire .bestiaire { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
  #bestiaire #alier-bloc .bestiaire { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
  .planche-bete__ages { grid-auto-columns: minmax(5.6rem, 1fr); }
  .planche-bestiaire__marche { grid-auto-columns: minmax(5rem, 1fr); }
}

/* Le dragon promis : l'ecran s'ouvre avant d'avoir une bete, et ce qui parle
   d'une bete absente se retire. Les sept boutons restent, fermes, avec leurs
   chiffres ; les trois chemins vers un oeuf ont deja leur bloc plus bas. */
.bete--sans-bete .jauges--bete,
.bete--sans-bete .bete__portrait,
.bete--sans-bete .bete__temperament,
.bete--sans-bete .bete__mange,
.bete--sans-bete .bete__terreur,
.bete--sans-bete .bete__risque,
.bete--sans-bete .bete__ordre,
.bete--sans-bete .bete__repos,
.bete--sans-bete .bete__traque,
.bete--sans-bete .bete__role,
.bete--sans-bete .bete__monture,
.bete--sans-bete .bete__politique,
.bete--sans-bete .bete__capacites,
.bete--sans-bete .planche-bete__scene { display: none; }