/* =====================================================================
   vivantdex.css — Look Pokédex pour VIVANT.
   Badges de TYPE colorés par groupe (le signal #1) + non-vu renforcé.
   Chargé APRÈS le style principal ; l'override non-vu utilise !important.
   ===================================================================== */

.badge-groupe{
  display:inline-flex; align-items:center; gap:5px;
  font:700 11px/1 inherit; letter-spacing:.02em; color:#fff;
  padding:4px 9px; border-radius:999px; background:#64748b;
  text-transform:capitalize; white-space:nowrap;
}
.badge-groupe.g-oiseau{background:#2f7ff0}
.badge-groupe.g-mammifere{background:#8a5a2b}
.badge-groupe.g-amphibien{background:#16a34a}
.badge-groupe.g-reptile{background:#6b7f2e}
.badge-groupe.g-insecte{background:#ea8a1e}
.badge-groupe.g-arachnide{background:#7c3aed}
.badge-groupe.g-vegetal,.badge-groupe.g-plante,.badge-groupe.g-flore{background:#4d9e5a}
.badge-groupe.g-poisson{background:#0ea5b7}
.badge-groupe.g-aucun{background:#64748b}

/* Grille : badge en haut-gauche de la vignette */
.carte .vignette{position:relative}
.carte .vignette .badge-groupe{
  position:absolute; top:8px; left:8px; z-index:2;
  font-size:10px; padding:3px 8px;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
/* le badge reste lisible meme sur une espece non vue */
.carte:not(.vue) .vignette .badge-groupe{opacity:.96}

/* Non-vu : plus sombre / mystérieux (une photo ne peut pas etre silhouettee en noir) */
.carte:not(.vue) .vignette img{
  filter:grayscale(1) contrast(1.12) brightness(0.4) blur(11px) !important;
}

/* Fiche : le groupe devient un badge colore (au lieu de l'etiquette grise) */
.fiche .etiquette.badge-groupe{color:#fff}

/* Célébration découverte : badge sous le nom latin */
.sacre .badge-groupe{font-size:12px;padding:5px 12px}

/* =====================================================================
   Entrée-dex — restyle de la CARTE D IDENTITE (fonction rendreFiche).
   Signal Pokédex : n° dex mono en grand + badge de TYPE en évidence,
   puis flavor text façon description, puis sections en fiche de données.
   Scopé sous .dex-fiche pour ne rien changer ailleurs. Sobre/nature.
   ===================================================================== */

/* Entête : n° dex + badge type mis en avant, tout en haut du corps */
.dex-entete{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:0 0 10px;
}
.dex-numero{
  font-size:26px; font-weight:700; line-height:1;
  letter-spacing:.01em; color:var(--texte-faible);
  font-variant-numeric:tabular-nums;
}
/* le badge de TYPE devient le signal fort de l entête */
.dex-fiche .dex-entete .badge-groupe{
  font-size:13px; padding:6px 13px;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}

/* Flavor text : encadré comme la description d une entrée de dex */
.dex-flavor{
  margin:16px 0 4px; padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--bord);
  border-left:3px solid var(--accent);
  border-radius:var(--rayon-s);
}
.dex-flavor .texte{ color:var(--texte); }
.dex-flavor--attente{ border-left-color:var(--bord-net); }
.dex-flavor--attente .texte{ color:var(--texte-faible); }

/* Sections data : look fiche de données (carte + lignes tabulaires) */
.dex-fiche .dex-data{
  background:var(--surface);
  border:1px solid var(--bord);
  border-radius:var(--rayon-s);
  padding:2px 14px;
}
.dex-fiche .dex-data div{ padding:11px 0; }
.dex-fiche .dex-data .valeur{
  color:var(--texte); font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* Titre de section : léger repère aligné dex */
.dex-fiche .section-titre{ display:flex; align-items:center; gap:8px; }
.dex-fiche .section-titre::before{
  content:""; width:14px; height:2px; border-radius:2px;
  background:var(--accent); opacity:.7; flex:none;
}