/* Havre'Fû — l'élevage en Havre-Lieu.
   Meme grammaire visuelle que Skin'Fu : un decor du jeu en calque fixe, des
   panneaux de verre poses dessus, et la police du builder partout
   pour le texte. L'accent est le vert prairie du Havre-Lieu, pour ne pas se
   confondre avec le vert menthe de Skin'Fu. */

:root {
  /* Le bandeau legal est fixe en bas : les colonnes s'arretent avant lui. */
  --bas: 54px;
  --fond:          #070c05;
  --panneau:       rgba(8, 15, 8, .92);
  --panneau-clair: rgba(14, 25, 13, .88);
  --bord:          rgba(120, 150, 90, .28);
  --bord-vif:      rgba(190, 240, 120, .62);
  --texte:         #f8fafc;
  --attenue:       #cbd5e1;
  --vert:          #a3e635;
  --vert-clair:    #f1f5f9;

  --aime:    #6ee7a0;
  --tiede:   #fbbf24;
  --deteste: #f87171;
  --rien:    #94a3b8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 400 16px/1.55 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  color: var(--texte);
  background: var(--fond);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 2px 12px rgba(0, 0, 0, .6);
}

h1, h2, h3 { font-family: 'Inter', 'Rajdhani', sans-serif; font-weight: 700; margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* ── Le decor ──────────────────────────────────────────────────────────────
   Deux calques fixes colles au viewport. Le premier porte l'image, assombrie
   et desaturee — la prairie est tres lumineuse, posee telle quelle elle
   rendrait le texte illisible. Le second porte le vignettage et le fondu du
   bas, qui ne doivent pas subir ce filtre. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background: url('fond-havre.webp') center top / cover no-repeat;
  filter: brightness(.56) saturate(.78);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 12, 5, .42) 0%, rgba(7, 12, 5, .04) 26%,
                            rgba(7, 12, 5, .22) 70%, rgba(7, 12, 5, .86) 100%),
    radial-gradient(ellipse 76% 68% at 52% 38%,
      transparent 0%, rgba(7, 12, 5, .16) 46%,
      rgba(7, 12, 5, .56) 78%, rgba(7, 12, 5, .78) 100%);
}

/* ── Bandeau ─────────────────────────────────────────────────────────────── */

.hf-entete {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 22px;
  height: 72px; padding: 7px 26px;
  background: linear-gradient(180deg, rgba(8, 14, 8, .86) 0%, rgba(8, 14, 8, .54) 100%);
  border-bottom: 1px solid rgba(163, 230, 53, .2);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.hf-logo {
  display: inline-flex; align-items: center; flex: none; padding: 2px 4px;
  transition: transform 160ms ease, filter 160ms ease;
}
.hf-logo img {
  height: 42px; width: auto; display: block;
  filter: drop-shadow(0 0 12px rgba(236, 72, 153, .42));
}
.hf-logo:hover { transform: translateY(-1px); }
.hf-logo:hover img { filter: drop-shadow(0 0 18px rgba(236, 72, 153, .72)); }

.hf-marque {
  margin: 0; font-weight: 400;
  font-family: 'Inter', 'Rajdhani', sans-serif;
  font-size: 22px; letter-spacing: .01em;
}
.hf-accent { color: var(--vert); text-shadow: 0 0 18px rgba(163, 230, 53, .5); }

.hf-badge {
  margin-left: auto;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(163, 230, 53, .12);
  border: 1px solid rgba(163, 230, 53, .42);
  color: var(--vert-clair);
  text-shadow: none;
  white-space: nowrap;
}

/* ── Page ────────────────────────────────────────────────────────────────── */

.hf-page { max-width: 1480px; margin: 0 auto; padding: 16px 20px 20px; }

.hf-legal {
  position: fixed;
  z-index: 9;
  right: 0;
  bottom: 5px;
  left: 0;
  margin: 0 auto;
  padding: 7px 20px;
  color: var(--attenue);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  pointer-events: none;
}
.hf-legal p { margin: 2px 0; }

.hf-intro { padding: 54px 0 34px; max-width: 620px; }
.hf-intro h1 {
  font-size: 40px; line-height: 1.15; margin-bottom: 14px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .9), 0 0 32px rgba(163, 230, 53, .22);
}
.hf-intro p { margin: 0; font-size: 17px; color: #e5e7eb; }

/* Panneaux de verre : le meme materiau que les cartes de Skin'Fu. */
.hf-panneau {
  position: relative;
  background: var(--panneau);
  border: 1px solid var(--bord);
  border-radius: 18px;
  padding: 22px 24px 26px;
  margin-bottom: 20px;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.hf-panneau h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: 22px; margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(163, 230, 53, .14);
}
.hf-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(180deg, var(--vert), #5f9c12);
  color: #16240a; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px;
  flex: none; text-shadow: none;
  box-shadow: 0 4px 14px rgba(163, 230, 53, .3);
}

/* ── Vignettes ───────────────────────────────────────────────────────────── */

.hf-familles, .hf-creatures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 12px;
}

.hf-vignette {
  background: var(--panneau-clair);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 12px 8px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.hf-vignette:hover {
  border-color: var(--bord-vif);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
}
.hf-vignette.is-actif {
  border-color: var(--vert);
  box-shadow: 0 0 0 1px var(--vert) inset, 0 0 26px rgba(163, 230, 53, .22);
}
.hf-vignette img {
  width: 72px; height: 72px; object-fit: contain;
  display: block; margin: 0 auto 8px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}
.hf-vignette .hf-nom { font-size: 15px; font-weight: 600; line-height: 1.25; }
.hf-vignette .hf-sous { font-size: 13px; color: var(--attenue); }

/* ── Relevé ──────────────────────────────────────────────────────────────── */

.hf-nom-ligne { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.hf-nom-ligne label { font-size: 16px; color: var(--attenue); }
.hf-nom-ligne input {
  background: rgba(6, 12, 6, .7);
  border: 1px solid var(--bord);
  border-radius: 12px;
  color: var(--texte);
  padding: 10px 14px; font-size: 16px; min-width: 240px;
  font-family: inherit; text-shadow: none;
}
.hf-nom-ligne input:focus { outline: none; border-color: var(--bord-vif); }

.hf-aide {
  background: rgba(163, 230, 53, .08);
  border-left: 3px solid var(--vert);
  border-radius: 0 12px 12px 0;
  padding: 12px 16px;
  font-size: 15px; color: #e5e7eb;
  margin: 0 0 18px;
}

.hf-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}
.hf-action {
  background: var(--panneau-clair);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 14px 16px 15px;
}
.hf-action-nom { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.hf-action-note { font-size: 13.5px; color: var(--attenue); margin-bottom: 10px; line-height: 1.4; }

.hf-choix { display: flex; gap: 7px; }
.hf-choix button {
  flex: 1 1 0; min-width: 0;
  background: rgba(6, 12, 6, .6);
  border: 1px solid var(--bord);
  border-radius: 11px;
  color: var(--attenue);
  padding: 8px 2px 6px;
  font-size: 12px; cursor: pointer;
  font-family: inherit; text-shadow: none;
  transition: border-color .14s, color .14s, background .14s, transform .14s;
}
.hf-choix button:hover { border-color: var(--bord-vif); color: var(--texte); transform: translateY(-1px); }
.hf-glyphe { display: block; line-height: 0; }
/* Les bulles sont désormais des images tirées du jeu, plus des SVG dessinés. */
.hf-glyphe img { width: 36px; height: 31px; display: block; margin: 0 auto 4px;
  object-fit: contain; image-rendering: auto; }
.hf-etiquette { display: block; font-size: 11.5px; letter-spacing: .2px; opacity: .9; }

.hf-choix button.is-actif { color: var(--texte); font-weight: 600; }
.hf-choix button[data-v="aime"].is-actif    { border-color: var(--aime);    background: rgba(110, 231, 160, .14); }
.hf-choix button[data-v="tiede"].is-actif   { border-color: var(--tiede);   background: rgba(251, 191, 36, .14); }
.hf-choix button[data-v="deteste"].is-actif { border-color: var(--deteste); background: rgba(248, 113, 113, .14); }
.hf-choix button[data-v="rien"].is-actif    { border-color: var(--rien);    background: rgba(148, 163, 184, .14); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.hf-barre { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.hf-bouton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 14px; cursor: pointer;
  font-size: 17px; font-weight: 600; white-space: nowrap;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.hf-bouton:hover { transform: translateY(-1px); }
.hf-bouton-vert {
  color: #16240a; border: 1px solid rgba(255, 255, 255, .4);
  background: linear-gradient(180deg, #cdf95f 0%, var(--vert) 50%, #63a214 100%);
  box-shadow: 0 10px 26px rgba(163, 230, 53, .32), inset 0 1px 0 rgba(255, 255, 255, .6);
  text-shadow: none;
}
.hf-bouton-vert:hover { box-shadow: 0 14px 34px rgba(163, 230, 53, .45), inset 0 1px 0 rgba(255, 255, 255, .65); }
.hf-bouton-vitre {
  border: 1px solid var(--bord); background: rgba(8, 15, 8, .86);
  color: var(--attenue);
  backdrop-filter: blur(8px);
}
.hf-bouton-vitre:hover { border-color: var(--bord-vif); color: var(--texte); }

/* ── Verdict ─────────────────────────────────────────────────────────────── */

.hf-bloc {
  background: var(--panneau-clair);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.hf-bloc h3 {
  font-family: 'Rajdhani', sans-serif;
  margin: 0 0 12px;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--vert-clair);
}
.hf-conseils { list-style: none; margin: 0; padding: 0; }
.hf-conseils li {
  display: flex; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(120, 150, 90, .14);
  font-size: 16px;
}
.hf-conseils li:last-child { border-bottom: 0; }
.hf-puce { flex: 0 0 auto; width: 20px; text-align: center; font-weight: 700; }
.hf-plus   { color: var(--aime); }
.hf-moins  { color: var(--deteste); }
.hf-neutre { color: var(--attenue); }

.hf-incertain { font-size: 14px; color: var(--attenue); font-style: italic; margin: 10px 0 0; }

.hf-objets { display: flex; gap: 12px; flex-wrap: wrap; }
.hf-objet {
  display: flex; align-items: center; gap: 10px;
  background: rgba(6, 12, 6, .6);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 7px 14px 7px 8px;
  font-size: 15px;
}
.hf-objet img { width: 38px; height: 38px; object-fit: contain; }

/* ── Récompenses ─────────────────────────────────────────────────────────── */

.hf-paliers { display: grid; gap: 9px; }
.hf-palier {
  display: flex; align-items: center; gap: 14px;
  background: rgba(6, 12, 6, .6);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 15px;
}
.hf-palier img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.hf-seuil {
  flex: 0 0 auto; min-width: 104px;
  font-variant-numeric: tabular-nums;
  color: var(--vert-clair); font-weight: 600;
}
.hf-qte { margin-left: auto; color: var(--attenue); }

/* ── Pied ────────────────────────────────────────────────────────────────── */

.hf-pied {
  padding: 26px 4px 0;
  font-size: 13.5px; color: var(--attenue); text-align: center;
}

@media (max-width: 720px) {
  .hf-entete { height: 62px; gap: 14px; padding: 6px 16px; }
  .hf-logo img { height: 34px; }
  .hf-marque { font-size: 18px; }
  .hf-badge { font-size: 11px; padding: 4px 9px; }
  .hf-page { padding: 0 16px 50px; }
  .hf-intro { padding: 32px 0 24px; }
  .hf-intro h1 { font-size: 28px; }
  .hf-intro p { font-size: 15.5px; }
  .hf-panneau { padding: 18px 16px 20px; border-radius: 15px; }
  .hf-panneau h2 { font-size: 19px; }
  .hf-familles, .hf-creatures { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
  .hf-vignette img { width: 56px; height: 56px; }
  .hf-actions { grid-template-columns: 1fr; }
}

/* ── Caractère de la créature ────────────────────────────────────────────── */

/* ♥ est la jauge de satisfaction : le jeu n'en montre pas le chiffre, alors
   on en montre le signe plutôt qu'un nombre nu. */
.hf-coeur {
  color: #ff7a9c;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(255, 122, 156, .35);
}

.hf-profil { background: rgba(163, 230, 53, .07); border-color: rgba(163, 230, 53, .26); }
.hf-identite { margin: 0 0 6px; font-size: 15px; color: var(--attenue); }
.hf-identite strong { color: var(--texte); font-size: 17px; }
.hf-resume {
  margin: 0;
  font-family: 'Inter', 'Rajdhani', sans-serif;
  font-size: 22px; line-height: 1.3;
  color: var(--vert-clair);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
}
.hf-etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hf-tag {
  font-size: 13.5px; font-weight: 600;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--bord);
  background: rgba(6, 12, 6, .55);
  text-shadow: none;
}
.hf-tag-plus   { border-color: rgba(110, 231, 160, .5); color: var(--aime); }
.hf-tag-moins  { border-color: rgba(248, 113, 113, .5); color: var(--deteste); }
.hf-tag-neutre { border-color: var(--bord); color: var(--attenue); }

/* ── Fonctionnement des Havre-Lieu ───────────────────────────────────────── */

.hf-regles-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}
.hf-regle {
  background: rgba(6, 12, 6, .5);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 16px 18px 18px;
}
.hf-regle h3 {
  font-size: 18px; margin-bottom: 8px;
  color: var(--vert-clair);
}
.hf-regle p { margin: 0; font-size: 15.5px; color: #e5e7eb; }

/* ── Bandeau : bouton et état du compte ──────────────────────────────────── */

.hf-bouton-entete {
  border: 1px solid rgba(163, 230, 53, .34);
  background: rgba(163, 230, 53, .08);
  color: var(--vert-clair);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  text-shadow: none;
  transition: background .15s, border-color .15s;
}
.hf-bouton-entete:hover { background: rgba(163, 230, 53, .18); border-color: var(--bord-vif); }

.hf-compte {
  font-size: 12px; color: var(--vert-clair);
  text-shadow: none; white-space: nowrap;
}
.hf-compte.is-hors { color: var(--attenue); }
.hf-badge { margin-left: 0; }

/* Le profil du joueur, a droite du bandeau. */
.hf-profil-compte {
  margin-left: auto; flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px 4px 5px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: rgba(6, 12, 6, .55);
  text-decoration: none; color: inherit;
  transition: border-color .14s, background .14s;
}
.hf-profil-compte:hover { border-color: var(--bord-vif); background: rgba(20, 34, 18, .6); }
.hf-profil-compte img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid rgba(163, 230, 53, .35);
  background: rgba(3, 7, 3, .6);
}
.hf-profil-textes { display: flex; flex-direction: column; line-height: 1.2; }
.hf-profil-textes strong { font-size: 14.5px; white-space: nowrap; }
/* Le rang, quand il y en a un, se lit sous le pseudo. */
.hf-profil-compte[data-rang]::after {
  content: attr(data-rang);
  margin-left: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(163, 230, 53, .14);
  border: 1px solid rgba(163, 230, 53, .4);
  color: var(--vert-clair);
  text-shadow: none; white-space: nowrap;
}

/* ── La fenêtre des règles ───────────────────────────────────────────────── */

body.hf-fige { overflow: hidden; }

/* « display: flex » l'emporte sur l'attribut hidden : sans cette regle, la
   fenetre reste affichee en permanence. */
.hf-voile[hidden] { display: none; }

.hf-voile {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(3, 7, 3, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hf-modale {
  width: min(1020px, 100%);
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: rgba(10, 20, 10, .94);
  border: 1px solid rgba(163, 230, 53, .3);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  overflow: visible;
}
.hf-modale-tete {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(163, 230, 53, .16);
}
.hf-modale-tete h2 { font-size: 24px; flex: 1; }
.hf-fermer {
  border: 1px solid var(--bord); background: rgba(6, 12, 6, .6);
  color: var(--attenue);
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 22px; line-height: 1; cursor: pointer; flex: none;
  text-shadow: none;
}
.hf-fermer:hover { color: var(--texte); border-color: var(--bord-vif); }
.hf-modale-corps { padding: 22px 24px 26px; overflow-y: auto; border-radius: 0 0 20px 20px; }
.hf-modale-tete { border-radius: 20px 20px 0 0; }

/* ── Mes créatures ───────────────────────────────────────────────────────── */

.hf-suivi { display: grid; gap: 10px; }
.hf-suivi-carte {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  background: rgba(6, 12, 6, .86);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 12px 46px 12px 14px;
}
.hf-suivi-carte img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.hf-suivi-corps { flex: 1 1 auto; min-width: 0; }
.hf-suivi-nom strong { font-size: 18px; }
.hf-suivi-nom span { font-size: 14px; color: var(--attenue); margin-left: 8px; }
.hf-suivi-traits { font-size: 14.5px; color: var(--vert-clair); }

.hf-palier-suivi { display: flex; align-items: center; gap: 8px; flex: none; }
.hf-palier-suivi button {
  width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--bord); background: rgba(6, 12, 6, .7);
  color: var(--attenue); font-size: 19px; line-height: 1; cursor: pointer;
  text-shadow: none;
}
.hf-palier-suivi button:hover { color: var(--texte); border-color: var(--bord-vif); }
.hf-palier-val { min-width: 84px; text-align: center; font-weight: 600; font-size: 15px; }

.hf-suivi-seuil { flex: none; font-size: 13.5px; color: var(--attenue); min-width: 128px; text-align: right; }

.hf-retirer {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--bord); background: rgba(6, 12, 6, .7);
  color: var(--attenue); font-size: 16px; line-height: 1; cursor: pointer;
  text-shadow: none;
}
.hf-retirer:hover { color: var(--deteste); border-color: rgba(248, 113, 113, .6); }

.hf-note-suivi { align-self: center; font-size: 14px; color: var(--vert-clair); }
.hf-note-suivi.is-erreur { color: var(--deteste); }

/* ── Récompenses en lots ─────────────────────────────────────────────────── */

/* Un lot tient sur deux lignes, toujours le même gabarit : l'objet et ce
   qu'il rapporte en tout sur la première, l'échelle des quatre humeurs sur
   la seconde. Les colonnes de l'échelle ne bougent jamais, si bien qu'un
   lot se compare à celui du dessus sans le lire. */
.hf-lot {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas: "img nom tot" "ech ech ech";
  gap: 7px 11px; align-items: center;
  background: rgba(6, 12, 6, .55);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.hf-lot:last-of-type { margin-bottom: 0; }
.hf-lot > img { grid-area: img; width: 34px; height: 34px; object-fit: contain; }
.hf-lot-corps { display: contents; }
.hf-lot-nom {
  grid-area: nom; margin: 0;
  font-size: 15px; font-weight: 600; line-height: 1.25;
}

/* Une récompense donnée sans condition d'humeur : elle se lit au nom, pas
   dans l'échelle, qui ne parle que des paliers. */
.hf-office {
  display: block;
  font-style: normal; font-size: 11.5px; font-weight: 600;
  color: var(--aime); letter-spacing: .02em;
}

/* L'en-tête nomme les colonnes une seule fois par bloc. Son retrait
   horizontal reprend celui d'un lot — bordure comprise — pour que les
   libellés tombent sur les valeurs. */
.hf-echelle-tete {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 0 13px 6px;
}
.hf-echelle-tete span {
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  text-align: center; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

.hf-echelle {
  grid-area: ech;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.hf-cran {
  font-size: 12.5px; font-weight: 700;
  padding: 3px 4px; border-radius: 7px;
  text-align: center; white-space: nowrap;
  text-shadow: none;
}
/* Une colonne vide dit « rien à ce palier » sans peser autant qu'un chiffre. */
.hf-cran.est-vide {
  background: rgba(255, 255, 255, .03);
  color: rgba(148, 163, 184, .45);
  font-weight: 400;
}

.hf-lot-total { grid-area: tot; text-align: right; line-height: 1.2; }
.hf-lot-total strong { font-size: 16px; color: var(--vert-clair); white-space: nowrap; }
.hf-lot-total span { display: block; font-size: 10.5px; color: var(--attenue); }
/* Le hasard n'a pas de total : l'échelle porte déjà les pourcentages. */
.hf-lot-total strong.est-hasard {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--attenue);
}

@media (max-width: 720px) {
  .hf-entete { flex-wrap: wrap; height: auto; }
  .hf-bouton-entete { font-size: 13px; padding: 6px 13px; }
  .hf-suivi-carte { flex-wrap: wrap; }
  .hf-suivi-seuil { text-align: left; min-width: 0; }
}

/* ── Onglets du bandeau ──────────────────────────────────────────────────── */

.hf-onglets { display: flex; gap: 4px; }
.hf-onglet {
  position: relative;
  border: 0; background: none;
  color: var(--attenue);
  padding: 10px 16px 12px;
  font-size: 15px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: color .18s;
}
.hf-onglet:hover { color: var(--texte); }
.hf-onglet.is-actif { color: var(--vert); text-shadow: 0 0 16px rgba(163, 230, 53, .45); }
.hf-onglet.is-actif::after {
  content: '';
  position: absolute; bottom: 0; left: 14px; right: 14px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--vert), transparent);
  box-shadow: 0 0 10px rgba(163, 230, 53, .65);
}

/* ── Cartes du havre-lieu ────────────────────────────────────────────────── */

.hf-suivi-carte {
  width: 100%;
  border: 1px solid var(--bord);
  background: rgba(6, 12, 6, .55);
  border-radius: 14px;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
}
.hf-suivi-carte:hover {
  border-color: var(--bord-vif);
  background: rgba(14, 25, 13, .94);
  transform: translateY(-1px);
}
.hf-suivi-palier { flex: none; text-align: right; line-height: 1.3; }
.hf-suivi-palier strong { display: block; font-size: 17px; color: var(--vert-clair); }
.hf-suivi-palier span { font-size: 12.5px; color: var(--attenue); }

/* ── Fiche d'une créature ────────────────────────────────────────────────── */

.hf-fiche-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.hf-champ { display: flex; flex-direction: column; gap: 6px; }
.hf-champ > span { font-size: 13px; color: var(--attenue); text-transform: uppercase; letter-spacing: .08em; }
.hf-champ input, .hf-champ select {
  background: rgba(6, 12, 6, .7);
  border: 1px solid var(--bord);
  border-radius: 11px;
  color: var(--texte);
  padding: 9px 12px; font-size: 16px;
  font-family: inherit; text-shadow: none;
  width: 100%;
}
.hf-champ input:focus, .hf-champ select:focus { outline: none; border-color: var(--bord-vif); }
.hf-champ select option { background: #0d1a0c; color: var(--texte); }

.hf-danger:hover { border-color: rgba(248, 113, 113, .6); color: var(--deteste); }

/* Les compteurs du jeu, repris tels quels : cinq posées au maximum. */
.hf-compteurs { display: flex; gap: 18px; margin: 0 0 12px; font-size: 14px; color: var(--attenue); }
.hf-compteurs .hf-trop { color: var(--deteste); font-weight: 700; }

.hf-champ-large { grid-column: 1 / -1; }
.hf-jauge-ligne { display: flex; align-items: center; gap: 14px; }
.hf-jauge-ligne input[type="range"] { flex: 1; accent-color: var(--vert); }

/* ── Choix de l'espèce par son bandeau ───────────────────────────────────── */

/* Les bandeaux font 132 x 41 : ils sont faits pour une ligne. */
.hf-bandeau-tete {
  /* Le portrait sort du cadre par le haut : il donne son allure à la fiche. */
  width: 104px; height: 104px; object-fit: contain; flex: none;
  margin: -46px 4px -18px 0;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .75));
}
.hf-bandeau-tete[hidden] { display: none; }

.hf-bandeaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.hf-bandeau {
  display: flex; align-items: center; gap: 10px;
  background: rgba(6, 12, 6, .6);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 6px 12px 6px 6px;
  color: var(--attenue);
  font-size: 15px; font-weight: 600;
  cursor: pointer; text-align: left;
  text-shadow: none;
  transition: border-color .14s, color .14s, background .14s;
}
.hf-bandeau img { height: 38px; width: auto; flex: none; }
.hf-bandeau:hover { border-color: var(--bord-vif); color: var(--texte); }
.hf-bandeau.is-actif {
  border-color: var(--vert);
  background: rgba(163, 230, 53, .12);
  color: var(--texte);
  box-shadow: 0 0 20px rgba(163, 230, 53, .18);
}

/* ── La carte du havre-lieu ──────────────────────────────────────────────── */

.hf-biomes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.hf-biome {
  border: 1px solid var(--bord);
  background: rgba(6, 12, 6, .55);
  border-radius: 12px;
  padding: 4px; cursor: pointer; line-height: 0;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.hf-biome img { width: 62px; height: 62px; object-fit: contain; display: block; }
.hf-biome:hover { border-color: var(--bord-vif); transform: translateY(-2px); }
.hf-biome.is-actif { border-color: var(--vert); box-shadow: 0 0 22px rgba(163, 230, 53, .25); }

.hf-carte {
  /* La carte porte le dessin du biome, et par-dessus les quatre zones ou se
     posent les creatures. */
  position: relative;
  width: 100%; max-width: 620px;
  margin: 0 auto 10px;
  aspect-ratio: 1330 / 1183;
  border-radius: 20px;
}
.hf-carte > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  filter: drop-shadow(0 12px 34px rgba(0, 0, 0, .6));
}
#carte-secteurs { position: absolute; inset: 0; pointer-events: none; }

#carte-zones { position: absolute; inset: 0; width: 100%; height: 100%; }
.hf-zone {
  fill: rgba(163, 230, 53, .22);
  stroke: #d9f99d;
  stroke-width: 5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(163, 230, 53, .9));
  transition: fill .14s, stroke .14s;
  cursor: copy;
}
.hf-zone.is-survol { fill: rgba(163, 230, 53, .45); stroke: #fff; stroke-width: 7; }
.hf-zone.hf-trop-plein { stroke: var(--tiede); fill: rgba(251, 191, 36, .22); }

/* Le nom et les pensionnaires se posent au centre du losange. */
.hf-secteur {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  pointer-events: none;
}
.hf-secteur .hf-hote { pointer-events: auto; }
.hf-secteur-nom {
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 12px; border-radius: 999px;
  background: rgba(8, 16, 6, .82);
  border: 1px solid rgba(163, 230, 53, .6);
  color: #f8fafc; text-shadow: none; white-space: nowrap;
}
.hf-secteur-hotes { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.hf-hote {
  border: 0; background: none; padding: 0; cursor: pointer; line-height: 0;
  border-radius: 8px;
}
.hf-hote img { width: 32px; height: 32px; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .7)); }
.hf-hote:hover img { filter: drop-shadow(0 0 8px rgba(217, 249, 157, .85)); }

/* La lueur dit si la créature est au bon endroit. Elle doit tenir sur un fond
   de carte clair et chargé : deux ombres portées, une serrée pour détourer,
   une large pour la halo. Le survol garde la main. */
.hf-hote.is-souci img {
  filter: drop-shadow(0 0 3px rgba(248, 113, 113, 1))
          drop-shadow(0 0 10px rgba(239, 68, 68, .9));
}
.hf-hote.is-ok img {
  filter: drop-shadow(0 0 3px rgba(163, 230, 53, 1))
          drop-shadow(0 0 10px rgba(132, 204, 22, .8));
}
.hf-hote.is-gris img {
  filter: drop-shadow(0 0 3px rgba(226, 232, 240, .95))
          drop-shadow(0 0 9px rgba(148, 163, 184, .7));
}
.hf-hote:hover img { filter: drop-shadow(0 0 9px rgba(217, 249, 157, 1))
                             drop-shadow(0 0 16px rgba(217, 249, 157, .7)); }

/* Une créature qui veut être seule porte un liseré, pour la repérer sans
   avoir à lire son nom. */
.hf-hote.veut-seule {
  box-shadow: 0 0 0 2px rgba(15, 23, 42, .85), 0 0 0 4px rgba(251, 191, 36, .95);
}

/* ── La légende, dans le coin libre de la carte ────────────────────────── */
.hf-legende {
  position: absolute;
  right: calc(10px * var(--e));
  bottom: calc(10px * var(--e));
  z-index: 3;
  padding: calc(10px * var(--e)) calc(13px * var(--e));
  border-radius: calc(12px * var(--e));
  background: rgba(10, 16, 12, .82);
  border: 1px solid rgba(217, 249, 157, .28);
  backdrop-filter: blur(3px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .55);
  pointer-events: none;
  max-width: calc(230px * var(--e));
}
.hf-legende-titre {
  margin: 0 0 calc(7px * var(--e));
  font-size: calc(12px * var(--e));
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vert-clair);
}
.hf-legende-ligne {
  display: flex; align-items: center;
  gap: calc(8px * var(--e));
  margin-bottom: calc(4px * var(--e));
  font-size: calc(14px * var(--e));
  color: #e2e8f0;
}
.hf-legende-mot { flex: 1; }
.hf-legende-nb { font-weight: 700; color: #f1f5f9; }
.hf-legende-pion {
  width: calc(11px * var(--e)); height: calc(11px * var(--e));
  border-radius: 50%; flex: none;
}
.hf-legende-pion.is-souci { background: #f87171; box-shadow: 0 0 7px rgba(239, 68, 68, .95); }
.hf-legende-pion.is-ok    { background: #a3e635; box-shadow: 0 0 7px rgba(132, 204, 22, .9); }
.hf-legende-pion.is-gris  { background: #cbd5e1; box-shadow: 0 0 7px rgba(148, 163, 184, .8); }
.hf-legende-pion.veut-seule {
  background: transparent;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, .95);
}
.hf-legende-seule { margin-top: calc(7px * var(--e)); }
.hf-legende-note {
  margin: calc(8px * var(--e)) 0 0;
  font-size: calc(12px * var(--e));
  line-height: 1.35;
  color: #94a3b8;
}
/* Sous 1100px la carte se resserre : la légende passerait par-dessus les
   pions, on la replie. */
@media (max-width: 1100px) { .hf-legende { display: none; } }

.hf-suivi-carte[draggable="true"] { cursor: grab; }
.hf-suivi-carte:active { cursor: grabbing; }

/* Un cran donne ce que rapporte le palier : une quantité si la récompense est
   garantie, un pourcentage sinon. La couleur est celle de l'humeur — même
   palette que le bloc des humeurs — et c'est elle qui identifie la colonne :
   le nom n'est écrit qu'une fois, dans l'en-tête du bloc. */
.hf-cran.h1, .hf-echelle-tete .h1 { color: #fca5a5; }
.hf-cran.h2, .hf-echelle-tete .h2 { color: #fcd34d; }
.hf-cran.h3, .hf-echelle-tete .h3 { color: var(--vert-clair); }
.hf-cran.h4, .hf-echelle-tete .h4 { color: var(--aime); }
.hf-cran.h1 { background: rgba(248, 113, 113, .13); }
.hf-cran.h2 { background: rgba(251, 191, 36, .12); }
.hf-cran.h3 { background: rgba(163, 230, 53, .13); }
.hf-cran.h4 { background: rgba(110, 231, 160, .15); }
/* Une colonne sans valeur reste grise quelle que soit son humeur : elle est
   déclarée après, sinon la teinte du palier la rattraperait. */
.hf-cran.est-vide, .hf-cran.est-vide.h1, .hf-cran.est-vide.h2,
.hf-cran.est-vide.h3, .hf-cran.est-vide.h4 {
  background: rgba(255, 255, 255, .03);
  color: rgba(148, 163, 184, .45);
}
.hf-lot-total strong { white-space: nowrap; }

/* Une créature éteinte reste dans la liste, mais ne se confond pas avec les
   vivantes. */
.hf-suivi-carte.est-morte { opacity: .6; border-style: dashed; }
.hf-suivi-carte.est-morte img { filter: grayscale(.85); }
.hf-suivi-carte.est-morte .hf-suivi-palier strong { color: var(--attenue); }

/* ── Ajouter une créature : la famille à gauche, la suite à droite ───────── */

.hf-ajout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.hf-colonne-gauche { position: sticky; top: 90px; max-height: calc(var(--vh) - 110px - var(--bas)); overflow-y: auto; }
.hf-colonne-gauche .hf-familles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hf-colonne-droite { min-height: 320px; }

.hf-recherche {
  width: 100%;
  background: rgba(6, 12, 6, .7);
  border: 1px solid var(--bord);
  border-radius: 12px;
  color: var(--texte);
  padding: 10px 14px; font-size: 16px;
  font-family: inherit; text-shadow: none;
  margin-bottom: 12px;
}
.hf-recherche:focus { outline: none; border-color: var(--bord-vif); }

.hf-vide { color: var(--attenue); font-style: italic; margin: 0; }

/* ── Le relevé guidé : une action à la fois ─────────────────────────────── */

.hf-avance {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
  font-size: 13px; color: var(--attenue);
  text-transform: uppercase; letter-spacing: .08em;
}
.hf-jauge-etapes { display: flex; gap: 5px; flex: 1; }
.hf-jauge-etapes i {
  flex: 1; height: 4px; border-radius: 999px;
  background: rgba(120, 150, 90, .25);
}
.hf-jauge-etapes i.est-faite { background: var(--vert); }
.hf-jauge-etapes i.est-en-cours { background: var(--vert-clair); box-shadow: 0 0 10px rgba(163, 230, 53, .6); }

.hf-consigne {
  font-size: 19px; line-height: 1.45;
  margin: 0 0 18px;
  color: #f1f5f9;
}
.hf-consigne strong { color: var(--vert-clair); }
/* Laver n'apparaît en jeu que sur une créature sale : la porte de sortie
   doit être lisible sans voler la vedette à la consigne. */
.hf-consigne-alt {
  display: block;
  margin-top: calc(6px * var(--e));
  font-size: 0.92em;
  opacity: 0.78;
}

.hf-choix-guide { gap: 10px; }
/* « L'action n'apparaît pas » n'est pas une cinquième bulle : il reste en
   retrait des quatre réponses, sans les concurrencer. */
/* ── Le relevé, modifiable bulle par bulle ─────────────────────────────── */
.hf-releve-ligne {
  display: flex; align-items: center; gap: calc(10px * var(--e));
  padding: calc(5px * var(--e)) 0;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.hf-releve-ligne:last-child { border-bottom: 0; }
.hf-releve-nom { flex: 1; font-size: calc(15px * var(--e)); color: #e2e8f0; }
.hf-releve-choix { display: flex; gap: calc(5px * var(--e)); flex: none; }
.hf-releve-bulle {
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .5);
  border-radius: calc(9px * var(--e));
  padding: calc(3px * var(--e)) calc(5px * var(--e));
  cursor: pointer; line-height: 0;
  opacity: .42;
  transition: opacity .15s, border-color .15s, background .15s;
}
.hf-releve-bulle:hover { opacity: .8; }
.hf-releve-bulle.is-actif {
  opacity: 1;
  border-color: var(--vert-clair);
  background: rgba(132, 204, 22, .16);
}
.hf-releve-bulle .hf-glyphe img { width: calc(28px * var(--e)); height: calc(24px * var(--e)); display: block; }

/* Les paliers avec ce qu'ils changent : une ligne par état, l'explication
   en dessous du nom plutôt qu'à côté, pour rester lisible en colonne. */
.hf-humeurs-detail { display: grid; gap: calc(9px * var(--e)); }
.hf-humeurs-detail li { display: block; }
.hf-humeurs-detail em {
  display: block;
  margin-top: calc(3px * var(--e));
  font-style: normal;
  font-size: 0.95em;
  color: var(--attenue);
  line-height: 1.4;
}

/* Le bloc de la collecte se distingue du reste : ailleurs la fiche déduit,
   ici elle rapporte ce qui a été observé. */
.hf-bloc-collecte {
  border-left: 3px solid rgba(125, 211, 252, .55);
}
.hf-bloc-collecte h3 { color: #7dd3fc; }
.hf-bloc-collecte em { font-style: normal; color: var(--attenue); font-size: .92em; }

.hf-passer {
  margin-top: calc(12px * var(--e));
  font-size: calc(14px * var(--e));
  opacity: .85;
}
.hf-choix-guide button { padding: 14px 6px 10px; font-size: 13px; }
.hf-choix-guide .hf-glyphe img { width: 54px; height: 46px; margin-bottom: 6px; }
.hf-choix-guide .hf-etiquette { font-size: 13px; }

.hf-retour { margin-top: 16px; padding: 9px 18px; font-size: 15px; }

.hf-alerte {
  border-color: rgba(251, 191, 36, .5);
  background: rgba(251, 191, 36, .08);
}
.hf-alerte h3 { color: var(--tiede); }
.hf-alerte p { font-size: 16px; margin: 0 0 14px; }

.hf-modale-pied {
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(163, 230, 53, .14);
  display: flex; justify-content: flex-end;
}

@media (max-width: 860px) {
  .hf-ajout { grid-template-columns: 1fr; }
  .hf-colonne-gauche { position: static; max-height: none; }
}

/* Six créatures n'ont pas d'image : un cartouche tient leur place. */
.hf-silhouette {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; margin: 0 auto 8px;
  border: 1px dashed var(--bord); border-radius: 12px;
  color: var(--attenue); font-size: 26px; text-shadow: none;
}

/* Portrait de remplacement : le Reliquâme de la famille, légèrement en
   retrait pour qu'on ne le confonde pas avec la créature elle-même. */
.hf-portrait-defaut { opacity: .78; filter: saturate(.8); }

/* ── L'aliment qu'une créature réclame ───────────────────────────────────── */

/* Le revêtement se choisit comme la nourriture : même grille, même bascule.
   [hidden] doit rester plus fort que le display de la grille. */
.hf-revetements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.hf-revetements[hidden] { display: none; }
.hf-revetement {
  display: flex; align-items: center; gap: 9px;
  background: rgba(6, 12, 6, .6);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 6px 12px 6px 6px;
  color: var(--attenue);
  font-size: 14.5px; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: border-color .14s, color .14s, background .14s;
}
.hf-revetement img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.hf-revetement:hover { border-color: var(--bord-vif); color: var(--texte); }
.hf-revetement.is-actif {
  border-color: var(--vert);
  background: rgba(163, 230, 53, .12);
  color: var(--texte);
}

.hf-aliments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.hf-aliment {
  display: flex; align-items: center; gap: 9px;
  background: rgba(6, 12, 6, .6);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 6px 12px 6px 6px;
  color: var(--attenue);
  font-size: 14.5px; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: border-color .14s, color .14s, background .14s;
}
.hf-aliment img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.hf-aliment:hover { border-color: var(--bord-vif); color: var(--texte); }
.hf-aliment.is-actif {
  border-color: var(--vert);
  background: rgba(163, 230, 53, .12);
  color: var(--texte);
  box-shadow: 0 0 20px rgba(163, 230, 53, .18);
}
.hf-note-aliment { grid-column: 1 / -1; margin: 2px 0 0; }

/* L'aliment rappelé sur la carte, et le récapitulatif au-dessus. */
.hf-suivi-aliment {
  width: 26px !important; height: 26px !important;
  object-fit: contain; flex: none;
  opacity: .85;
}
.hf-stock {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 12px;
  font-size: 14px; color: var(--attenue);
}
.hf-stock-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(6, 12, 6, .55);
  border: 1px solid var(--bord);
  border-radius: 999px;
  padding: 3px 11px 3px 4px;
  color: var(--texte);
}
.hf-stock-item img { width: 24px; height: 24px; object-fit: contain; }

/* ── Le rappel de remplissage, un cycle de 24 h ──────────────────────────── */

.hf-rappel {
  display: block; width: 100%;
  margin: 0 0 12px;
  padding: 11px 16px;
  border: 1px solid rgba(251, 191, 36, .5);
  border-radius: 12px;
  background: rgba(251, 191, 36, .12);
  color: #fde68a;
  font-family: inherit; font-size: 15px; font-weight: 700;
  text-align: center; cursor: pointer;
  transition: border-color .14s, background .14s;
}
.hf-rappel:hover { border-color: var(--tiede); background: rgba(251, 191, 36, .2); }
.hf-rappel.is-faite {
  border-color: var(--bord);
  background: rgba(6, 12, 6, .5);
  color: var(--attenue);
  font-weight: 600; font-size: 14px;
  cursor: default;
}

/* ── Le havre-lieu : les créatures à gauche, l'affichage à droite ───────── */

.hf-havre {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
/* Chaque colonne tient dans la fenêtre et défile pour elle-même : la page,
   elle, ne défile pas. */
.hf-colonne-creatures,
.hf-colonne-affichage {
  max-height: calc(var(--vh) - 104px - var(--bas));
  overflow-y: auto;
  margin-bottom: 0;
}
.hf-colonne-creatures h2 { margin-bottom: 14px; }

.hf-panneau-tete {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(163, 230, 53, .14);
}
.hf-panneau-tete h2 {
  flex: 1; margin: 0; padding: 0; border: none;
  font-size: 22px;
}
.hf-panneau-tete .hf-bouton { flex: none; }
.hf-panneau-tete .hf-bandeau-tete { flex: none; }

.hf-colonne-affichage .hf-carte { max-width: 560px; }
.hf-fiche-corps { display: block; }

.hf-modale-etroite { width: min(580px, 100%); }
.hf-modale-etroite .hf-biomes { justify-content: center; }

@media (max-width: 1020px) {
  .hf-havre { grid-template-columns: minmax(0, 1fr); }
  .hf-colonne-creatures,
  .hf-colonne-affichage { max-height: none; overflow: visible; margin-bottom: 20px; }
}

/* ── La fiche : trois colonnes, et rien à faire défiler ──────────────────── */

.hf-havre.is-fiche {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(300px, 360px);
}
.hf-colonne-drops {
  max-height: calc(var(--vh) - 104px - var(--bas));
  overflow-y: auto;
  margin-bottom: 0;
}
.hf-colonne-drops h2 { margin-bottom: 14px; }

/* Le portrait deborde du cadre, comme une medaille posee dessus. */
.hf-colonne-affichage { overflow: visible; max-height: none; }
#panneau-carte,
.hf-fiche-corps { max-height: calc(var(--vh) - 200px - var(--bas)); overflow-y: auto; }
#panneau-fiche { padding-top: 6px; }
#panneau-fiche .hf-bandeau-tete {
  width: 118px; height: 118px; object-fit: contain;
  align-self: flex-start;
  margin: -58px 6px -22px 0;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .78));
}

/* Les lots tiennent dans une colonne etroite sans la faire defiler. */
.hf-colonne-drops .hf-lot { gap: 6px 9px; padding: 9px 10px; margin-bottom: 6px; }
.hf-colonne-drops .hf-lot > img { width: 30px; height: 30px; }
.hf-colonne-drops .hf-lot-nom { font-size: 14px; }
.hf-colonne-drops .hf-cran { font-size: 11.5px; padding: 3px 2px; }
.hf-colonne-drops .hf-echelle-tete { padding: 0 11px 5px; }
.hf-colonne-drops .hf-lot-total strong { font-size: 15px; }
.hf-colonne-drops .hf-bloc { padding: 12px 14px; margin-bottom: 12px; }
.hf-colonne-drops .hf-bloc h3 { margin-bottom: 8px; }
.hf-colonne-drops .hf-incertain { font-size: 12.5px; margin-top: 8px; }

/* Un choix replie : l'intitule à gauche, le bouton qui l'ouvre à droite. */
.hf-repli-tete {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.hf-repli-tete > span {
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--attenue);
}
.hf-bouton.hf-mini {
  margin-left: auto; flex: none;
  padding: 5px 13px; font-size: 13.5px;
}
.hf-bouton.hf-mini.is-ouvert { border-color: var(--vert); color: var(--texte); }

@media (max-width: 1320px) {
  .hf-havre.is-fiche { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .hf-colonne-drops { grid-column: 2; }
}
@media (max-width: 1020px) {
  .hf-havre.is-fiche { grid-template-columns: minmax(0, 1fr); }
  .hf-colonne-drops { grid-column: auto; max-height: none; overflow: visible; margin-bottom: 20px; }
  #panneau-carte, .hf-fiche-corps { max-height: none; overflow: visible; }
}

/* Un display: grid ou flex ecrase l'attribut hidden : on tranche une fois
   pour toutes, comme pour les voiles de fenetre. */
[hidden] { display: none !important; }

/* ── Défilement : la page ne bouge pas, seules les colonnes défilent ────── */

@media (min-width: 1021px) {
  html, body { height: 100%; overflow: hidden; }
  .hf-page { height: calc(var(--vh) - 72px); overflow: hidden; padding-bottom: var(--bas); }
  .hf-colonne-droite { max-height: calc(var(--vh) - 110px - var(--bas)); overflow-y: auto; }
}

/* Une barre discrète, dans le vert de la page. */
* { scrollbar-width: thin; scrollbar-color: rgba(163, 230, 53, .38) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(6, 12, 6, .45); border-radius: 999px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(163, 230, 53, .52), rgba(95, 156, 18, .52));
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(163, 230, 53, .82), rgba(95, 156, 18, .82));
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Dans la colonne étroite, seule la colonne de l'icône se resserre : le
   gabarit du lot, lui, est le même partout. */
.hf-colonne-drops .hf-lot { grid-template-columns: 30px minmax(0, 1fr) auto; }

/* La carte d'une créature : son nom, son espèce à côté, ses profils dessous.
   Dans une colonne étroite, l'espèce se tronque plutôt que de casser la
   ligne en deux. */
.hf-suivi-nom {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
}
.hf-suivi-nom strong { flex: none; }
.hf-suivi-nom span {
  margin-left: 0;
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hf-suivi-traits { margin-top: 2px; line-height: 1.35; }
.hf-suivi-palier { min-width: 0; }
.hf-suivi-palier strong { font-size: 15px; white-space: nowrap; }

/* ── Sans compte, l'outil ne sert à rien : on le dit franchement ────────── */

.hf-voile-connexion { z-index: 40; }
.hf-connexion { text-align: center; padding: 30px 30px 34px; }
.hf-connexion-logo { height: 54px; width: auto; margin-bottom: 14px; }
.hf-connexion h2 { font-size: 24px; margin-bottom: 10px; }
.hf-connexion p {
  margin: 0 auto 20px; max-width: 420px;
  font-size: 15px; color: #e5e7eb; line-height: 1.55;
}

/* Un gain et une perte ne se lisent pas de la même couleur. */
.hf-coeur.hf-gain { color: var(--aime); }
.hf-coeur.hf-perte { color: var(--deteste); }

/* Ouvrir une fiche ne doit pas retailler la colonne de gauche : elle garde
   sa largeur, sinon les cartes se coupent et un défilement horizontal
   apparaît. */
.hf-havre,
.hf-havre.is-fiche { grid-template-columns: 400px minmax(0, 1fr); }
.hf-havre.is-fiche { grid-template-columns: 400px minmax(0, 1fr) minmax(300px, 360px); }
.hf-colonne-creatures { overflow-x: hidden; }
/* Le 46 px de droite servait un bouton de retrait qui n'existe plus. */
.hf-suivi-carte { padding-right: 14px; }
.hf-suivi-palier span { white-space: nowrap; }

@media (max-width: 1320px) {
  .hf-havre.is-fiche { grid-template-columns: 400px minmax(0, 1fr); }
}
@media (max-width: 1020px) {
  .hf-havre,
  .hf-havre.is-fiche { grid-template-columns: minmax(0, 1fr); }
}

/* La barre de défilement mangeait la largeur du contenu : on lui réserve sa
   place au lieu de la laisser rogner. */
.hf-colonne-creatures,
.hf-colonne-affichage,
.hf-colonne-drops,
.hf-colonne-gauche,
.hf-colonne-droite,
#panneau-carte,
.hf-fiche-corps { scrollbar-gutter: stable; }

/* Le décor : la prairie respire davantage, sans que le texte y perde. */

/* Seule la liste défile : le panneau garde sa largeur, la barre reste à
   l'intérieur et le rappel comme le bouton restent visibles. */
.hf-colonne-creatures {
  display: flex; flex-direction: column;
  overflow: hidden;
  max-height: calc(var(--vh) - 104px - var(--bas));
  scrollbar-gutter: auto;
}
.hf-colonne-creatures .hf-suivi {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding-right: 4px;
}
.hf-colonne-creatures .hf-barre { flex: none; padding-top: 12px; }

/* Un item de grille ne descend pas sous son contenu minimal sans qu'on le
   lui dise : c'est ce qui faisait déborder les cartes. */
.hf-suivi > * { min-width: 0; }
.hf-suivi-carte { width: 100%; }

/* ── Le bandeau : les onglets au centre ─────────────────────────────────── */

.hf-entete > .hf-logo { flex: none; }
.hf-titre-groupe { flex: 1 1 0; display: flex; align-items: center; gap: 16px; min-width: 0; }
.hf-marque { flex: none; }
.hf-entete .hf-onglets { flex: none; }
.hf-profil-compte { flex: 1 1 0; justify-content: flex-end; margin-left: 0; }
/* La pastille ne doit pas s'étirer avec sa colonne. */
.hf-profil-compte { background: none; border: none; padding: 0; }
.hf-profil-compte > * { flex: none; }
.hf-profil-interieur {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px 4px 5px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: rgba(6, 12, 6, .86);
  transition: border-color .14s, background .14s;
}
.hf-profil-compte:hover .hf-profil-interieur {
  border-color: var(--bord-vif); background: rgba(14, 25, 13, .94);
}

/* Le bouton de compte est celui du site. Son hôte ne lui impose ni taille,
   ni bordure, ni couleur : il ne fait que tenir la colonne droite. */
.hf-compte-hote {
  margin-left: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: flex-end;
}

/* ── Le fonctionnement, en page ─────────────────────────────────────────── */

.hf-panneau-regles {
  max-height: calc(var(--vh) - 104px - var(--bas));
  overflow-y: auto;
  margin-bottom: 0;
}
.hf-regles-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
.hf-regle {
  background: rgba(6, 12, 6, .5);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 16px 18px 18px;
}
.hf-regle h3 {
  font-size: 22px; margin-bottom: 10px;
  color: var(--vert-clair);
}
.hf-regle p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.5; color: #e5e7eb; }
.hf-regle ul, .hf-regle ol { margin: 0 0 10px; padding: 0; list-style: none; }
.hf-regle li {
  position: relative;
  padding-left: 19px; margin-bottom: 8px;
  font-size: 16.5px; line-height: 1.45; color: #e5e7eb;
}
.hf-regle li::before {
  content: '';
  position: absolute; left: 3px; top: .58em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--vert); opacity: .75;
}
.hf-regle li:last-child { margin-bottom: 0; }
/* La chute d'une carte : le conseil, détaché du reste. */
.hf-chute {
  margin: 12px 0 0 !important;
  padding-top: 10px;
  border-top: 1px solid rgba(163, 230, 53, .14);
  font-size: 15.5px !important; color: var(--attenue) !important;
}
.hf-regle .hf-chute strong { color: var(--vert-clair); }

/* Les quatre humeurs, lisibles d'un coup d'œil. */
.hf-humeurs { counter-reset: h; }
.hf-humeurs li { padding-left: 0; margin-bottom: 6px; }
.hf-humeurs li::before { display: none; }
.hf-humeur {
  display: inline-block;
  padding: 3px 12px; border-radius: 999px;
  font-size: 15.5px; font-weight: 700; letter-spacing: .02em;
  text-shadow: none; white-space: nowrap;
}
.hf-humeur.h1 { background: rgba(248, 113, 113, .16); border: 1px solid rgba(248, 113, 113, .42); color: #fca5a5; }
.hf-humeur.h2 { background: rgba(251, 191, 36, .14); border: 1px solid rgba(251, 191, 36, .4); color: #fcd34d; }
.hf-humeur.h3 { background: rgba(163, 230, 53, .14); border: 1px solid rgba(163, 230, 53, .42); color: var(--vert-clair); }
.hf-humeur.h4 { background: rgba(110, 231, 160, .18); border: 1px solid rgba(110, 231, 160, .5); color: var(--aime); }

/* Centrage vrai : le logo à gauche n'a pas d'équivalent à droite, un
   partage en trois parts égales ne suffit donc pas. */
@media (min-width: 1180px) {
  .hf-entete { position: relative; }
  .hf-entete .hf-onglets {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ── La carte n'a pas besoin d'un cadre : elle flotte ───────────────────── */

/* Le panneau de verre part de la colonne et se pose sur la seule fiche. */
.hf-colonne-affichage {
  background: none; border: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0;
}
#panneau-fiche {
  background: var(--panneau);
  border: 1px solid var(--bord);
  border-radius: 18px;
  padding: 22px 24px 26px;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* La carte prend toute la hauteur disponible ; sa largeur suit son format. */
#panneau-carte { max-height: none; overflow: visible; padding: 0 4px; }
.hf-colonne-affichage .hf-carte {
  max-width: min(100%, calc((var(--vh) - 214px) * 1.124));
  margin-top: 4px;
}
.hf-colonne-affichage .hf-carte > img {
  filter: drop-shadow(0 18px 46px rgba(0, 0, 0, .72))
          drop-shadow(0 4px 12px rgba(0, 0, 0, .5));
}
#panneau-carte .hf-panneau-tete { border-bottom: none; padding-bottom: 0; margin-bottom: 4px; }
#panneau-carte #carte-aide { text-align: left; margin: 2px 0 4px; }

/* ── La fiche : le nom s'édite là où il s'affiche ───────────────────────── */

.hf-fiche-titre { flex: 1 1 auto; min-width: 0; }
.hf-fiche-titre input {
  display: block; width: 100%;
  font-family: 'Inter', 'Rajdhani', sans-serif;
  font-size: 26px; line-height: 1.2;
  color: var(--texte);
  background: none; border: none;
  border-bottom: 1px solid transparent;
  padding: 0 2px 2px; margin: 0;
  text-shadow: inherit;
}
.hf-fiche-titre input:hover { border-bottom-color: var(--bord); }
.hf-fiche-titre input:focus {
  outline: none;
  border-bottom-color: var(--vert);
  background: rgba(163, 230, 53, .06);
}
.hf-fiche-titre input::placeholder { color: var(--attenue); opacity: .7; }
#fiche-espece-nom {
  display: block; padding-left: 2px;
  font-size: 14px; color: var(--attenue); text-shadow: none;
}

/* Nourriture retenue et boutons de changement, sur une seule ligne. */
/* ── Les quatre reglages : une puce chacun, la liste se deroule dessous ─── */
.hf-reglages { margin-bottom: 14px; }
.hf-reglages-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.hf-reg {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--bord);
  background: rgba(6, 12, 6, .6);
  color: var(--texte);
  font-family: inherit; font-size: 14px; cursor: pointer;
  text-shadow: none;
  transition: border-color .14s, background .14s;
}
.hf-reg:hover { border-color: var(--bord-vif); }
.hf-reg.is-ouvert { border-color: var(--vert); background: rgba(163, 230, 53, .14); }
.hf-reg img { width: 22px; height: 22px; object-fit: contain; }
.hf-reg-cle {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--attenue);
}
.hf-reg-val { font-weight: 600; }
.hf-reg::after {
  content: ''; width: 6px; height: 6px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .55; transition: transform .15s ease;
}
.hf-reg.is-ouvert::after { transform: rotate(-135deg) translate(-2px, -2px); }
/* L'enclos garde sa couleur ici comme sur la carte. */
.hf-reg[data-enclos="A"] .hf-reg-val { color: #bfdbfe; }
.hf-reg[data-enclos="B"] .hf-reg-val { color: var(--vert-clair); }
.hf-reg-note {
  margin: 8px 0 0; font-size: 13.5px; font-style: italic; color: var(--attenue);
}
.hf-volet {
  margin-top: 10px; padding: 12px;
  border: 1px solid var(--bord); border-radius: 12px;
  background: rgba(4, 9, 4, .55);
}

/* ── Échelle : le même rendu quelle que soit la résolution ──────────────── */
/* La page est dessinée pour 1920 × 1080 et mise à l'échelle d'un bloc. Le
   décor vit sur <html> pour échapper au zoom, et --vh rend aux hauteurs la
   mesure réelle du viewport. */
:root { --e: 1; --vh: 100vh; }

@media (min-width: 900px) {
  body { zoom: var(--e); background: transparent; }
  html { background: var(--fond); }
  html::before {
    content: ''; position: fixed; inset: 0; z-index: -2;
    background: url('fond-havre.webp') center top / cover no-repeat;
    filter: brightness(.56) saturate(.78);
  }
  html::after {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background:
      linear-gradient(180deg, rgba(7, 12, 5, .42) 0%, rgba(7, 12, 5, .04) 26%,
                              rgba(7, 12, 5, .22) 70%, rgba(7, 12, 5, .86) 100%),
      radial-gradient(ellipse 76% 68% at 52% 38%,
        transparent 0%, rgba(7, 12, 5, .16) 46%,
        rgba(7, 12, 5, .56) 78%, rgba(7, 12, 5, .78) 100%);
  }
  body::before, body::after { display: none; }
}

.hf-secteurs-choix { display: flex; flex-wrap: wrap; gap: 7px; }
.hf-secteur-choix {
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--bord);
  background: rgba(6, 12, 6, .6);
  color: var(--attenue);
  font-size: 14px; font-weight: 600; cursor: pointer;
  text-shadow: none;
  transition: border-color .14s, color .14s, background .14s;
}
.hf-secteur-choix:hover { border-color: var(--bord-vif); color: var(--texte); }
.hf-secteur-choix.is-actif {
  border-color: var(--vert); color: var(--texte);
  background: rgba(163, 230, 53, .14);
}

/* ═══ Mobile ════════════════════════════════════════════════════════════════
   Sous 900 px : pas de mise à l'échelle, une seule colonne, et des cibles
   assez larges pour le pouce. L'outil se consulte le jeu ouvert à côté. */

@media (max-width: 899px) {

  body { font-size: 16px; }
  .hf-page { max-width: none; padding: 10px 12px 28px; height: auto; overflow: visible; }
  .hf-legal {
    position: static;
    padding: 2px 14px 22px;
    font-size: 12px;
    pointer-events: auto;
  }

  /* Le bandeau : l'identité sur une ligne, les onglets sur la suivante. */
  .hf-entete {
    flex-wrap: wrap; height: auto; gap: 10px;
    padding: 8px 12px;
    /* Pas de bandeau colle sur telephone : entre la barre d adresse qui se
       retracte et le clavier, il vaut mieux qu il defile avec la page. */
    position: static;
  }
  .hf-logo img { height: 32px; }
  .hf-marque { flex: 1 1 auto; font-size: 18px; }
  .hf-compte-hote { flex: none; }
  .hf-profil-compte { flex: none; }
  .hf-profil-interieur { padding: 3px 10px 3px 4px; }
  .hf-profil-compte img { width: 28px; height: 28px; }
  .hf-profil-textes strong { font-size: 13px; }
  .hf-profil-compte[data-rang]::after { display: none; }

  /* La barre passe a la ligne au lieu de defiler. Elle defilait avant, avec
     scrollbar-width:none : 288 px etaient hors champ sans aucun indice, ce qui
     enterrait le 4e onglet ET le bouton de connexion — un visiteur qui avait
     refuse la modale d'accueil n'avait plus aucun moyen de se connecter. */
  .hf-entete .hf-onglets {
    order: 3; flex: 1 0 100%;
    display: flex; flex-wrap: wrap; gap: 2px; row-gap: 6px;
    align-items: center;
  }
  .hf-onglet { flex: 1 0 auto; padding: 9px 12px; font-size: 13.5px; white-space: nowrap; }

  /* Une colonne, et rien qui se fige en hauteur. */
  .hf-havre,
  .hf-havre.is-fiche,
  .hf-ajout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hf-colonne-creatures,
  .hf-colonne-affichage,
  .hf-colonne-drops,
  .hf-colonne-gauche,
  .hf-colonne-droite,
  .hf-panneau-regles,
  #panneau-carte,
  .hf-fiche-corps,
  .hf-colonne-creatures .hf-suivi {
    max-height: none; overflow: visible;
    position: static;
  }
  .hf-colonne-creatures { display: block; }
  .hf-panneau { padding: 16px 14px 18px; margin-bottom: 14px; border-radius: 14px; }
  .hf-colonne-affichage { padding: 0; }

  /* La carte occupe la largeur de l'écran, sans plus dépendre de la hauteur. */
  .hf-colonne-affichage .hf-carte { max-width: 100%; margin: 6px auto; }
  #panneau-carte .hf-panneau-tete { flex-wrap: wrap; gap: 10px; }
  #panneau-carte .hf-panneau-tete h2 { font-size: 20px; }

  /* Les secteurs se touchent au doigt : des pastilles plus grandes. */
  .hf-secteur-nom { font-size: 11px; padding: 3px 8px; }
  .hf-hote img { width: 26px; height: 26px; }

  /* La fiche, plein cadre. */
  .hf-fiche-titre input { font-size: 22px; }
  #panneau-fiche .hf-bandeau-tete { width: 86px; height: 86px; margin: -40px 4px -16px 0; }
  .hf-panneau-tete { flex-wrap: wrap; gap: 10px; }
  .hf-reglages-liste { gap: 6px; }
  .hf-reg { flex: 1 1 auto; justify-content: center; min-height: 42px; }
  .hf-bouton, .hf-secteur-choix, .hf-aliment, .hf-bandeau { min-height: 42px; }
  .hf-barre { flex-wrap: wrap; gap: 8px; }
  .hf-barre .hf-bouton { flex: 1 1 auto; }
  .hf-bandeaux, .hf-aliments { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Ajouter une créature : deux familles de front, le reste dessous. */
  .hf-colonne-gauche .hf-familles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-creatures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-choix-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-recherche { min-height: 44px; }

  /* Le fonctionnement : une carte par ligne. */
  .hf-regles-grille { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* Les fenêtres prennent tout l'écran. */
  .hf-voile { padding: 12px; }
  .hf-modale, .hf-modale-etroite { width: 100%; max-height: 88vh; }
  .hf-modale-corps { padding: 16px 14px 20px; }

  /* Les récompenses restent lisibles dans une colonne étroite. */
  .hf-colonne-drops .hf-lot { grid-template-columns: 30px minmax(0, 1fr) auto; }
}

/* Très petits écrans : on resserre encore. */
@media (max-width: 400px) {
  .hf-bandeaux, .hf-aliments { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .hf-suivi-carte { gap: 10px; padding: 10px 12px; }
  .hf-suivi-carte img { width: 44px; height: 44px; }
  .hf-suivi-nom strong { font-size: 16px; }
}

@media (max-width: 899px) {
  /* Les trois onglets doivent tenir sans qu'on ait à les faire défiler. */
  .hf-onglet { padding: 9px 6px; font-size: 12px; letter-spacing: .02em; }

  /* Le titre garde sa ligne, le bouton passe dessous. */
  #panneau-carte .hf-panneau-tete h2 { flex: 1 0 100%; }
  #panneau-carte .hf-panneau-tete .hf-bouton { width: 100%; justify-content: center; }

  /* La carte d'une créature : le lieu reste à droite du nom. */
  .hf-suivi-carte { flex-wrap: nowrap; }
  .hf-suivi-palier { align-self: center; }
  .hf-suivi-palier span { font-size: 12px; }
}

@media (max-width: 899px) {
  /* Des cibles assez grandes pour le pouce. */
  .hf-hote { min-width: 40px; min-height: 40px; }
  .hf-hote img { width: 34px; height: 34px; }
  .hf-fiche-titre input { padding: 6px 2px; }
}

/* ── Les gestes, tries par ce qu'ils lui font ───────────────────────────── */

.hf-gestes {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px;
  margin-bottom: 9px;
}
.hf-gestes-titre {
  flex: 0 0 auto; min-width: 118px;
  font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--attenue);
}
.hf-geste {
  padding: 3px 11px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  text-shadow: none; white-space: nowrap;
  border: 1px solid var(--bord);
  background: rgba(6, 12, 6, .5);
  color: var(--attenue);
}
.hf-geste-oui { border-color: rgba(110, 231, 160, .5); background: rgba(110, 231, 160, .14); color: var(--aime); }
.hf-geste-non { border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .12); color: #fca5a5; }
.hf-geste-neutre { border-color: rgba(251, 191, 36, .32); color: #fcd34d; }
.hf-geste-flou { border-style: dashed; }

@media (max-width: 899px) {
  .hf-gestes-titre { flex: 1 0 100%; min-width: 0; margin-bottom: 2px; }
}

/* La bulle telle qu'elle s'affiche en jeu, devant l'intitulé. */
.hf-gestes-titre { display: inline-flex; align-items: center; gap: 7px; }
.hf-gestes-bulle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 21px; flex: none;
}
.hf-gestes-bulle img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* ── L'analyse, réservée à l'administration ─────────────────────────────── */

.hf-analyse-tete { margin-bottom: 16px; font-size: 15px; }
.hf-analyse-tete strong { color: var(--vert-clair); font-size: 17px; }

.hf-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
.hf-table th {
  text-align: left; padding: 8px 10px;
  font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--attenue); font-weight: 600;
  border-bottom: 1px solid rgba(163, 230, 53, .2);
}
.hf-table td {
  padding: 9px 10px; vertical-align: top;
  border-bottom: 1px solid rgba(163, 230, 53, .08);
  color: #e5e7eb;
}
.hf-table tr:hover td { background: rgba(163, 230, 53, .05); }
.hf-table .hf-nombre { text-align: right; font-weight: 700; color: var(--vert-clair); }
.hf-table .hf-geste { display: inline-block; margin: 2px 3px 2px 0; }
/* Une absence qui commence à peser. */
.hf-piste { color: #fcd34d; font-weight: 600; }
.hf-incertain.is-erreur { color: var(--deteste); font-style: normal; }

/* Les règles se lisent par sujet, pas en bloc. */
.hf-section {
  font-size: 21px; color: var(--vert-clair);
  margin: 22px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(163, 230, 53, .16);
}
.hf-section:first-of-type { margin-top: 4px; }
.hf-regles-grille + .hf-section { margin-top: 26px; }

/* Icônes dans le tableau d'analyse. */
.hf-ident-espece { display: inline-flex; align-items: center; gap: 9px; }
.hf-ident-espece img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.hf-pastille {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 2px 4px 2px 0; padding: 2px 9px 2px 3px;
  border-radius: 999px; border: 1px solid var(--bord);
  font-size: 12.5px; white-space: nowrap; text-shadow: none;
}
.hf-pastille img { width: 22px; height: 22px; object-fit: contain; }
.hf-pastille.est-vue { border-color: rgba(110, 231, 160, .45); background: rgba(110, 231, 160, .12); color: var(--aime); }
.hf-pastille.est-absente { opacity: .5; color: var(--attenue); }
td.est-piste .hf-pastille.est-absente { opacity: 1; border-color: rgba(251, 191, 36, .45); color: #fcd34d; }

.hf-tri { display: inline-flex; gap: 6px; margin-left: auto; }
.hf-tri .hf-secteur-choix { padding: 4px 12px; font-size: 13px; }
.hf-analyse-tete { align-items: center; }

.hf-table tr.hf-groupe td {
  padding-top: 16px;
  border-bottom: 1px solid rgba(163, 230, 53, .2);
  color: var(--vert-clair);
}
.hf-table tr.hf-groupe:hover td { background: none; }

/* ── Les éleveurs : un compte de jeu chacun ─────────────────────────────── */

.hf-eleveurs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.hf-eleveur {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--bord);
  background: rgba(6, 12, 6, .6);
  color: var(--attenue);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  text-shadow: none; white-space: nowrap;
  transition: border-color .14s, color .14s, background .14s;
}
.hf-eleveur:hover { border-color: var(--bord-vif); color: var(--texte); }
.hf-eleveur.is-actif {
  border-color: var(--vert); color: var(--texte);
  background: rgba(163, 230, 53, .14);
}
.hf-eleveur-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  background: rgba(163, 230, 53, .18);
  color: var(--vert-clair);
  font-size: 11.5px; font-weight: 700;
}
.hf-eleveur-plus { font-size: 16px; padding: 5px 12px; line-height: 1; }

/* ── Où la placer ───────────────────────────────────────────────────────── */

.hf-verdict { font-size: 15.5px; color: #e5e7eb; margin: 0 0 12px; line-height: 1.5; }
.hf-verdict strong { color: var(--vert-clair); }
.hf-liste { list-style: none; margin: 0; padding: 0; }
.hf-souci {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; font-size: 14.5px; line-height: 1.45; color: #e5e7eb;
  border-top: 1px solid rgba(163, 230, 53, .1);
}
.hf-souci:first-child { border-top: none; }
.hf-souci-signe {
  flex: none; width: 16px; height: 16px; margin-top: 3px;
  border-radius: 50%; position: relative;
}
.hf-souci-signe::before {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; line-height: 1;
}
.hf-souci.est-mal .hf-souci-signe::before { content: '!'; color: var(--deteste); }
.hf-souci.est-bien .hf-souci-signe::before { content: '✓'; color: var(--aime); }
.hf-souci.est-neutre .hf-souci-signe::before { content: '·'; color: var(--attenue); font-size: 22px; }
.hf-souci.est-mal { color: #f3dede; }

/* Le secteur, puis l'enclos : ce sont deux choses différentes. */
.hf-enclos-libelle {
  align-self: center; margin: 0 2px 0 8px;
  font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--attenue);
}
.hf-enclos-choix { min-width: 38px; text-align: center; padding: 6px 10px; }

/* Deux enclos par secteur : la séparation doit se voir, et chaque moitié
   doit se distinguer au survol pour qu'on sache où l'on dépose. */
.hf-zone-enclos { stroke-width: 2.5; }
.hf-secteur-nom { font-variant-numeric: tabular-nums; }

/* Une créature posée se prend et se repose ailleurs. */
.hf-secteur .hf-hote { cursor: grab; }
.hf-secteur .hf-hote:active { cursor: grabbing; }

/* ── A et B se distinguent à l'œil ──────────────────────────────────────── */

.hf-zone-enclos[data-enclos="A"] {
  stroke: #bfdbfe;
  fill: rgba(96, 165, 250, .24);
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, .9));
}
.hf-zone-enclos[data-enclos="A"].is-survol {
  fill: rgba(96, 165, 250, .46); stroke: #fff;
}
.hf-zone-enclos[data-enclos="B"] {
  stroke: #d9f99d;
  fill: rgba(163, 230, 53, .2);
}
/* Le trop-plein l'emporte : c'est une alerte, pas une étiquette. */
.hf-zone-enclos.hf-trop-plein {
  stroke: var(--tiede);
  fill: rgba(251, 191, 36, .22);
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, .85));
}

.hf-secteur[data-enclos="A"] .hf-secteur-nom {
  border-color: rgba(96, 165, 250, .65);
  color: #dbeafe;
}
.hf-secteur[data-enclos="B"] .hf-secteur-nom {
  border-color: rgba(163, 230, 53, .6);
  color: var(--vert-clair);
}

/* La même couleur sur la carte de la créature, pour la retrouver d'un coup
   d'œil dans la liste. */
.hf-suivi-carte[data-enclos="A"] {
  border-color: rgba(96, 165, 250, .5);
  background: rgba(8, 18, 34, .9);
}
.hf-suivi-carte[data-enclos="A"]:hover {
  border-color: rgba(96, 165, 250, .9);
  background: rgba(13, 28, 52, .96);
}
.hf-suivi-carte[data-enclos="B"] {
  border-color: rgba(163, 230, 53, .5);
  background: rgba(10, 24, 8, .9);
}
.hf-suivi-carte[data-enclos="B"]:hover {
  border-color: rgba(163, 230, 53, .9);
  background: rgba(18, 38, 14, .96);
}
.hf-suivi-palier span { font-variant-numeric: tabular-nums; }

/* ── Un fondu court d'une vue à l'autre ─────────────────────────────────── */
/* L'animation ne porte pas la visibilité : une vue reste lisible même si
   l'animation ne démarre jamais. */
@keyframes hf-apparait {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.hf-apparait { animation: hf-apparait .25s ease both; }
@media (prefers-reduced-motion: reduce) { .hf-apparait { animation: none; } }

/* ── Illustrations des règles ───────────────────────────────────────────── */

.hf-titre-icones { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; }
.hf-titre-icones img { width: 30px; height: 30px; object-fit: contain; }

.hf-liste-rendu li { display: flex; align-items: center; gap: 12px; padding-left: 0; }
.hf-liste-rendu li::before { display: none; }
.hf-pb {
  flex: 0 0 auto; position: relative;
  display: inline-flex; align-items: center;
  min-width: 34px;
}
.hf-pb img { width: 30px; height: 30px; object-fit: contain; }
.hf-pb img + img { margin-left: -12px; }
/* Aucun butin : le Porte-bonheur s'éteint et se barre. */
.hf-pb-nul img { filter: grayscale(1) brightness(.75); opacity: .55; }
.hf-pb-nul::after,
.hf-pb-nul::before {
  content: ''; position: absolute; left: 3px; right: 3px; top: 50%;
  height: 2px; border-radius: 2px;
  background: var(--deteste);
  box-shadow: 0 0 4px rgba(0, 0, 0, .8);
}
.hf-pb-nul::before { transform: rotate(45deg); }
.hf-pb-nul::after  { transform: rotate(-45deg); }

/* Le niveau d'une famille, en coin de sa vignette. */
.hf-vignette { position: relative; }
.hf-niveau {
  position: absolute; top: 6px; right: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(3, 7, 3, .82);
  border: 1px solid rgba(163, 230, 53, .35);
  color: var(--vert-clair);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  text-shadow: none; white-space: nowrap;
}

/* L'outil se construit avec ceux qui s'en servent. */
.hf-essai {
  flex: none;
  margin: 14px 0 0; padding: 12px 14px;
  border: 1px solid rgba(251, 191, 36, .28);
  border-radius: 12px;
  background: rgba(251, 191, 36, .07);
  font-size: 13.5px; line-height: 1.45; color: #d9cdaa;
  text-shadow: none;
}
.hf-essai strong {
  display: inline-block; margin-bottom: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tiede);
  padding: 2px 10px; border-radius: 999px;
  background: rgba(251, 191, 36, .14);
  border: 1px solid rgba(251, 191, 36, .4);
}

/* Cartes repliables de la fiche : un clic sur le titre ouvre ou ferme. */
.hf-bloc.hf-pliable > h3 {
  cursor: pointer;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
  user-select: none;
}
.hf-bloc.hf-pliable > h3::after {
  content: '';
  width: 7px; height: 7px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
  opacity: .7;
}
.hf-bloc.hf-pliable > h3:hover { color: #d9f99d; }
.hf-bloc.hf-plie > h3 { margin-bottom: 0; }
.hf-bloc.hf-plie > h3::after { transform: rotate(-45deg) translate(-2px, -2px); }
.hf-bloc.hf-plie > *:not(h3) { display: none; }

/* Une creature sale ne repond rien : l'avertir avant le releve evite des
   heures de gestes pour un resultat vide. */
.hf-avert-sale {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--tiede, #fbbf24);
  border-radius: 0 8px 8px 0;
  background: rgba(251, 191, 36, .08);
  font-size: 14.5px; line-height: 1.5;
  color: #fde68a;
}

/* ── « Comment marche l'outil » ────────────────────────────────────────
   Le bouton doit donner envie : c'est lui qui evite qu'on prenne une
   deduction pour une certitude. Il vit donc a cote de la marque, pas
   relegue au bout de l'entete. */
.hf-bouton-aide {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px 9px 10px;
  border: 1px solid rgba(163, 230, 53, .42);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(163, 230, 53, .16), rgba(163, 230, 53, .06));
  color: #d9f99d;
  font-family: inherit; font-size: 14px; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-shadow: none;
  transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}
.hf-bouton-aide:hover {
  border-color: var(--vert);
  background: linear-gradient(135deg, rgba(163, 230, 53, .28), rgba(163, 230, 53, .12));
  color: #f0fdd4;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(163, 230, 53, .18);
}
.hf-aide-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  background: var(--vert);
  color: #0b1207;
  font-size: 15px; font-weight: 800; line-height: 1;
}

/* ── Le contenu de la modale ──────────────────────────────────────────
   De l'air, des blocs distincts, et du texte assez grand pour se lire
   d'une traite : le pave precedent donnait envie de fermer. */
/* Le corps de la modale s'appelle hf-expl, pas hf-aide : ce dernier est
   deja pris par l'encadre vert du releve, dont il heritait le fond et la
   bordure gauche. */
.hf-modale-aide { width: min(880px, 100%); }

.hf-expl-chapeau {
  margin: 0 0 22px;
  padding: 20px 24px;
  border: 1px solid rgba(163, 230, 53, .3);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(163, 230, 53, .14), transparent 62%),
    rgba(163, 230, 53, .05);
  font-size: 18px; line-height: 1.6;
  color: #f0fdd4;
  text-wrap: balance;
}

.hf-expl-intro {
  margin: 0 0 26px;
  padding: 0 4px;
  font-size: 16.5px; line-height: 1.7;
  color: var(--texte);
}

.hf-expl-src {
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid var(--bord);
  border-radius: 16px;
  background: rgba(255, 255, 255, .022);
}
.hf-expl-src h3 {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 17px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--texte);
}
.hf-expl-puce {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  font-size: 15px; font-weight: 800; line-height: 1;
  color: #0b0f14;
}
/* La couleur dit la solidite avant meme qu'on lise. */
.hf-src-jeu    { background: #a3e635; box-shadow: 0 0 14px rgba(163, 230, 53, .34); }
.hf-src-toi    { background: #60a5fa; box-shadow: 0 0 14px rgba(96, 165, 250, .32); }
.hf-src-nous   { background: #c084fc; box-shadow: 0 0 14px rgba(192, 132, 252, .32); }
.hf-src-limite { background: #fbbf24; box-shadow: 0 0 14px rgba(251, 191, 36, .32); }

.hf-expl-src p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.72; }
.hf-expl-src p:last-child { margin-bottom: 0; }
.hf-expl-src ul { margin: 0 0 12px; padding-left: 4px; list-style: none; }
.hf-expl-src li {
  position: relative;
  margin-bottom: 9px; padding-left: 20px;
  font-size: 15.5px; line-height: 1.65;
}
.hf-expl-src li::before {
  content: '';
  position: absolute; left: 4px; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(148, 163, 184, .5);
}
.hf-expl-note {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, .14);
  color: var(--attenue);
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.hf-expl-regle {
  margin: 0 0 16px;
  padding: 16px 20px;
  border: 1px solid rgba(163, 230, 53, .26);
  border-left: 4px solid var(--vert);
  border-radius: 4px 16px 16px 4px;
  background: rgba(163, 230, 53, .07);
  font-size: 15.5px; line-height: 1.7;
}

.hf-expl-pied {
  margin: 22px 0 0;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  font-size: 14.5px; line-height: 1.65;
  color: var(--attenue);
  text-align: center;
}

@media (max-width: 899px) {
  .hf-bouton-aide { font-size: 12.5px; padding: 7px 13px 7px 8px; gap: 7px; }
  .hf-aide-icone { width: 20px; height: 20px; font-size: 13px; }
  .hf-expl-chapeau { font-size: 16px; padding: 15px 16px; }
  .hf-expl-intro { font-size: 15px; }
  .hf-expl-src { padding: 15px 16px; }
  .hf-expl-src p, .hf-expl-src li { font-size: 14.5px; }
}

/* ── Le bonheur estimé, et la déclaration du butin ───────────────────────
   Le jeu ne montre jamais la satisfaction : la jauge est donc la première
   chose de la fiche, et elle dit une fourchette, pas un chiffre faussement
   précis. */

.hf-bonheur { padding-bottom: 14px; }
.hf-bonheur-tete { display: flex; align-items: baseline; gap: 10px; }
.hf-bonheur-tete h3 { margin: 0; }
.hf-bonheur-age {
  margin-left: auto;
  font-size: 12px; color: var(--attenue);
  letter-spacing: .04em; text-transform: uppercase;
}
.hf-bonheur-valeur {
  margin: 8px 0 7px;
  font-size: 15px; color: var(--attenue);
}
.hf-bonheur-valeur strong { font-size: 24px; color: var(--vert-clair); }
.hf-bonheur-vide { font-style: italic; }
.hf-bonheur-faux { color: var(--deteste); font-weight: 600; }

/* La jauge court de 0 à 100 : la plage possible s'y pose à l'échelle, et
   sa largeur dit à elle seule ce que l'estimation vaut. */
.hf-jauge {
  position: relative; height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(248, 113, 113, .22), rgba(251, 191, 36, .22),
    rgba(163, 230, 53, .22), rgba(110, 231, 160, .26));
  border: 1px solid var(--bord);
  overflow: hidden;
}
.hf-jauge-plage {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(180deg, var(--vert-clair), rgba(95, 156, 18, .9));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(163, 230, 53, .45);
}

.hf-bonheur-pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px;
}

/* Une ligne de saisie par objet : l'icône, le nom, la quantité. */
.hf-butin-ligne {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin-bottom: 5px;
  background: rgba(6, 12, 6, .5);
  border: 1px solid var(--bord);
  border-radius: 10px;
  cursor: text;
}
.hf-butin-ligne > img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.hf-butin-nom { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.hf-butin-q {
  flex: none; width: 74px;
  padding: 5px 8px;
  font: inherit; font-size: 14px; text-align: right;
  color: var(--texte);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--bord); border-radius: 8px;
}
.hf-butin-q:focus { outline: none; border-color: var(--vert); }

/* Le compte de porte-bonheur se lit avec son dénominateur : seul, il ne
   voudrait rien dire. */
.hf-sur-cycles { font-size: 11.5px; color: var(--attenue); font-weight: 400; }

/* ── Relevés remontés ──────────────────────────────────────────────────
   Un relevé qu'aucun caractère n'explique est une piece a examiner, pas
   une erreur du joueur : le bloc le dit, et la reponse revient ici. */
.hf-signal-merci {
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--vert);
  border-radius: 0 10px 10px 0;
  background: rgba(163, 230, 53, .09);
  color: #d9f99d;
  font-size: 15px; line-height: 1.55;
}

.hf-signal-filtres { display: flex; gap: 8px; }

/* Une ligne par piece : image, nom, compte. Le releve se deplie au clic,
   sinon dix signalements font un mur. */
.hf-signal-carte { margin-bottom: 10px; padding: 0; overflow: hidden; }
.hf-signal-tete {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 12px 16px;
  border: 0; background: transparent;
  color: var(--texte); font-family: inherit; font-size: 15px;
  text-align: left; cursor: pointer;
  transition: background .14s;
}
.hf-signal-tete:hover { background: rgba(255, 255, 255, .04); }
.hf-signal-img {
  width: 42px; height: 42px; flex: none;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
}
.hf-signal-nom { font-weight: 700; }
.hf-signal-espece { color: var(--attenue); font-size: 14px; }
.hf-signal-qui {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(192, 132, 252, .12);
  color: #d8b4fe;
  font-size: 12.5px;
}
.hf-signal-chevron {
  width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--attenue);
  border-bottom: 2px solid var(--attenue);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .16s ease;
}
.hf-signal-carte.est-ouvert .hf-signal-chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.hf-signal-detail {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--bord);
}
.hf-signal-detail[hidden] { display: none; }
.hf-signal-meta { margin: 12px 0; font-size: 12.5px; color: var(--attenue); }
.hf-signal-releve {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px 14px;
  margin: 0 0 12px; padding: 0; list-style: none;
}
.hf-signal-releve li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  font-size: 13.5px;
}
.hf-signal-releve img { width: 26px; height: 22px; object-fit: contain; }
.hf-signal-actions { display: flex; gap: 8px; align-items: center; }
.hf-signal-actions input {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--bord); border-radius: 8px;
  background: rgba(6, 12, 6, .6);
  color: var(--texte); font-family: inherit; font-size: 14px;
}
.hf-signal-actions input:focus { outline: none; border-color: var(--vert); }

/* Le bouton des relevés remontés : discret, mais son compteur doit se
   voir — une pièce non examinée est une correction qui attend. */
.hf-bouton-signal {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  margin-left: 10px;
  border: 1px solid rgba(192, 132, 252, .36);
  border-radius: 12px;
  background: rgba(192, 132, 252, .1);
  color: #d8b4fe;
  font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.hf-bouton-signal:hover { border-color: #c084fc; background: rgba(192, 132, 252, .2); }
.hf-bouton-signal[hidden] { display: none; }
.hf-signal-compteur {
  position: absolute; top: -6px; right: -6px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700; line-height: 19px;
  text-align: center;
}
.hf-signal-compteur[hidden] { display: none; }
.hf-modale-tete .hf-signal-filtres { margin-left: auto; }

/* Le drapeau a cote du nom. Il pulse tant que la piece n'est pas partie :
   un releve que rien n'explique est ce qui fait avancer les regles, il ne
   doit pas passer inapercu. */
.hf-signaler {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgba(192, 132, 252, .5);
  border-radius: 999px;
  background: rgba(192, 132, 252, .12);
  color: #e9d5ff;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-shadow: none;
  transition: border-color .16s, background .16s, transform .16s;
}
.hf-signaler[hidden] { display: none; }
.hf-signaler:hover:not(:disabled) {
  border-color: #c084fc;
  background: rgba(192, 132, 252, .24);
  transform: translateY(-1px);
}
.hf-signaler:disabled { cursor: default; opacity: .85; }
.hf-signaler.est-envoye {
  border-color: rgba(148, 163, 184, .34);
  background: rgba(148, 163, 184, .1);
  color: var(--attenue);
}
.hf-signaler.est-repondu {
  border-color: rgba(163, 230, 53, .5);
  background: rgba(163, 230, 53, .12);
  color: #d9f99d;
}
.hf-signaler.pulse { animation: hfSignalPulse 1.9s ease-in-out infinite; }
@keyframes hfSignalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 132, 252, .5); }
  50%      { box-shadow: 0 0 0 9px rgba(192, 132, 252, 0); }
}
/* La visibilite ne depend jamais de l'animation : seule l'ombre bouge. */
@media (prefers-reduced-motion: reduce) {
  .hf-signaler.pulse { animation: none; border-color: #c084fc; }
}
/* Un releve presque muet a deja son explication : le signaler dans la liste
   evite de le lire en entier. */
.hf-signal-doute { color: var(--tiede, #fbbf24) !important; }