/* La fiche d'un Pokémon. Reprise de la maquette du 24 août 2026, à l'identique
   pour la mise en page ; seuls les sélecteurs de conteneur changent, la fiche
   vivant ici dans la modale #previewOverlay et non seule sur une page.

   Deux jetons nouveaux, déclarés plus bas et non dans base.css : --fond n'a pas
   d'emploi hors maquette, et --teinte se recalcule à chaque fiche depuis le
   type principal — c'est fiche.js qui l'écrit sur l'élément.

   Ce fichier est chargé APRÈS dex.css : là où les deux se marchent dessus, le
   dessin de la fiche l'emporte. */

.preview-card.fiche{
  --teinte:#5269ac; --teinte-appui:#8fa8dd;
  --teinte-voile:rgba(82,105,172,.10);
  --ombre:0 30px 60px -20px rgba(28,30,41,.34);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .preview-card.fiche{
    --teinte:#8fa8dd; --teinte-appui:#5269ac;
    --teinte-voile:rgba(143,168,221,.13);
    --ombre:0 30px 60px -20px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] .preview-card.fiche{
  --teinte:#8fa8dd; --teinte-appui:#5269ac;
  --teinte-voile:rgba(143,168,221,.13);
  --ombre:0 30px 60px -20px rgba(0,0,0,.6);
}

/* ---- La fiche -------------------------------------------------- */
.preview-card.fiche{
  position:relative;
  overflow:hidden;
}
.fiche-fermer{
  position:absolute; top:14px; right:16px; z-index:6;
  width:34px; height:34px;
  border:1px solid var(--card-border); border-radius:50%;
  background:var(--card); color:var(--ink);
  font-size:15px; line-height:1; cursor:pointer;
}
.fiche-fermer:hover{ background:var(--dex-red); border-color:var(--dex-red); color:#fff; }
.fiche-fermer:focus-visible{ outline:2.5px solid var(--dex-red); outline-offset:2px; }

/* ---- 1. La bande d'identite ------------------------------------
   L'ancienne fiche empilait un carre de 320 px, puis le nom centre
   dessous. On la couche : le portrait a gauche, l'identite a droite.
   ---------------------------------------------------------------- */
.identite{
  display:grid;
  grid-template-columns:264px 1fr;
  gap:26px;
  padding:26px 26px 22px;
  background:linear-gradient(180deg, var(--teinte-voile), transparent 84%), var(--card);
  border-bottom:1px solid var(--card-border);
}
/* LA COLONNE DE GAUCHE. Le portrait est carre : dans une bande qui fait deux
   fois sa hauteur, il laissait dessous une plage vide aussi grande que lui,
   pendant que la colonne de droite s'allongeait. Elle sert maintenant. */
.identite-cote{ display:flex; flex-direction:column; gap:11px; min-width:0; }

.portrait{
  position:relative;
  aspect-ratio:1/1;
  border-radius:14px;
  background:radial-gradient(120% 120% at 50% 14%, var(--card) 0%, var(--screen) 68%);
  box-shadow:inset 0 0 0 1px var(--card-border), inset 0 0 0 4px var(--teinte-voile);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.portrait.chromatique{ box-shadow:inset 0 0 0 2px var(--gold); }
.portrait img{
  width:92%; height:92%; object-fit:contain;
  filter:drop-shadow(0 12px 16px rgba(20,20,30,.24));
}
/* Les GIF de Showdown n'ont pas une taille unique. La maquette avait relevé
   celle de Dracolosse — 85 x 98 — et en avait fait la regle : tous les sprites
   etaient poses en 170 x 196. Mesure sur vingt especes, ils vont de 45 x 49
   (Bulbizarre) a 234 x 55 (Kyogre) : ce cadre fixe gonflait Bulbizarre de
   quatre fois et faisait passer Kyogre d'un rapport de 4,25:1 a 0,87:1, ecrase
   sur toute sa longueur.

   La taille est donc calculee par grille.js, d'apres celle du GIF : double
   exact tant que le double tient dans le cadre, simple ajustement au-dela.
   Le plus proche voisin ne vaut que pour le double exact — sur une reduction
   il donne des pixels de tailles inegales, et c'est le lissage qui rend le
   mieux. */
.portrait.anime img{
  width:auto; height:auto;
  image-rendering:pixelated;
  filter:drop-shadow(0 8px 10px rgba(20,20,30,.3));
}
.portrait.anime.ajuste img{ image-rendering:auto; }
.portrait-source{
  position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
  display:flex; gap:0;
  border:1px solid var(--card-border); border-radius:999px;
  background:var(--card); overflow:hidden;
}
.portrait-source button{
  font-family:var(--font-data); font-size:8.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  border:0; background:transparent; color:var(--ink-faint);
  padding:5px 11px; cursor:pointer; line-height:1.2;
}
.portrait-source button.actif{ background:var(--teinte); color:var(--card); }
.portrait-source button:focus-visible{ outline:2px solid var(--dex-red); outline-offset:-2px; }
/* Le son, en face du numero : le numero tient le coin gauche, le groupe du son
   tient le droit. Le bouton de fermeture de la fiche est loin — il est cale sur
   le coin de la carte, pas sur celui du portrait, qui ne fait que 264 px.

   Le curseur sort vers la gauche au survol : row-reverse le pose avant le
   bouton, donc il pousse dans le vide du portrait et non hors du cadre. Il
   reste replie tant qu'on ne s'approche pas — un curseur en permanence dans le
   coin d'une image de Pokemon, c'est une barre d'outils sur un portrait. */
.portrait-son{
  position:absolute; top:9px; right:10px;
  display:flex; flex-direction:row-reverse; align-items:center; gap:6px;
}
/* display:flex sur une classe bat l attribut hidden, qui ne vaut que
   display:none dans la feuille du navigateur. Sans cette ligne, le groupe
   reste visible quand le cri est introuvable — le seul cas ou on le cache. */
.portrait-son[hidden]{ display:none; }
.portrait-cri{
  width:26px; height:26px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--card-border); border-radius:50%;
  background:var(--card); color:var(--ink-soft);
  cursor:pointer; padding:0;
}
.portrait-cri:hover{ background:var(--teinte); border-color:var(--teinte); color:var(--card); }
.portrait-cri:disabled{ opacity:.45; cursor:default; }
.portrait-cri:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }

/* Au repos, la boite doit valoir zero — sinon le groupe garde une zone de
   survol la ou l on ne voit rien. box-sizing vaut border-box dans toute
   l application : une largeur nulle ne suffit donc pas, le navigateur refuse
   de descendre sous la somme des marges internes et des bordures, et laisse
   un moignon de 16 px. On les annule avec la largeur, et on les rend au
   deploiement. */
.portrait-volume{
  -webkit-appearance:none; appearance:none;
  width:0; opacity:0; pointer-events:none;
  height:22px; margin:0; padding:0;
  border:0 solid var(--card-border); border-radius:999px;
  background:var(--card);
  transition:width .16s ease, opacity .16s ease, padding .16s ease,
             border-width .16s ease;
  cursor:pointer;
}
.portrait-son:hover .portrait-volume,
.portrait-son:focus-within .portrait-volume{
  width:76px; opacity:1; pointer-events:auto;
  padding:0 7px; border-width:1px;
}
.portrait-volume::-webkit-slider-runnable-track{
  height:3px; border-radius:999px; background:var(--card-border);
}
.portrait-volume::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:11px; height:11px; margin-top:-4px;
  border:0; border-radius:50%; background:var(--teinte);
}
.portrait-volume:focus-visible{ outline:2px solid var(--dex-red); outline-offset:1px; }
@media (prefers-reduced-motion:reduce){
  .portrait-volume{ transition:none; }
}
/* Le numero national, en police d'ecran. C'est le seul endroit de la
   fiche ou elle sert : un Pokedex affiche un numero, pas du texte. */
.portrait-no{
  position:absolute; top:9px; left:10px;
  font-family:var(--font-display); font-size:9px; line-height:1;
  color:var(--ink-soft);
  background:var(--card);
  border:1px solid var(--card-border); border-radius:7px;
  padding:5px 7px 4px;
}
.identite-corps{ display:flex; flex-direction:column; gap:11px; min-width:0; }
.surtitre{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-family:var(--font-data); font-size:9.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
.gen-puce{
  border:1px solid var(--teinte); color:var(--teinte);
  border-radius:999px; padding:2px 9px; letter-spacing:.1em;
}
.nom{
  font-size:38px; font-weight:800; line-height:1.05; margin:0;
  letter-spacing:-.015em; text-wrap:balance;
}
.nom-autre{ font-size:13.5px; color:var(--ink-soft); margin:-4px 0 0; }
.nom-autre span{ color:var(--ink-faint); }
.types{ display:flex; gap:6px; flex-wrap:wrap; }
.type-img{ display:inline-block; width:100px; height:22px; object-fit:contain; vertical-align:middle; }

/* Le gabarit : cinq champs que l'ancienne fiche n'affichait pas. */
.gabarit{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(102px, 1fr));
  gap:1px; margin:3px 0 0;
  background:var(--card-border);
  border:1px solid var(--card-border); border-radius:10px; overflow:hidden;
}
.gabarit > div{ background:var(--screen); padding:7px 10px; }
.gabarit dt{
  font-family:var(--font-data); font-size:8.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 2px;
}
.gabarit dd{
  margin:0; font-family:var(--font-data); font-size:12.5px; font-weight:600;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.gabarit dd small{ font-size:10px; color:var(--ink-faint); font-weight:500; }

/* Les numeros regionaux, sous le gabarit. Le portrait porte le numero
   national ; celui-ci ne dit pas a quel rang l'espece figure dans le jeu qu'on
   a sous la main. Le Pokedex du jeu ouvert passe devant et se marque. */
.dex-regionaux{ display:flex; gap:5px; flex-wrap:wrap; }
.dex-regionaux:empty{ display:none; }
.dex-reg{
  display:inline-flex; align-items:baseline; gap:6px;
  font-size:11px; color:var(--ink-soft);
  background:var(--screen);
  border:1px solid var(--card-border);
  border-radius:7px; padding:2px 8px;
}
.dex-reg b{
  font-family:var(--font-data); font-size:10.5px; font-weight:700;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.dex-reg.ici{ border-color:var(--teinte); }
.dex-reg.ici b{ color:var(--teinte); }
/* Au-dela de six, les puces attendent repliees : Pikachu figure dans dix-sept
   Pokedex regionaux, et la bande entiere pousserait les etats de capture hors
   de l'ecran. Le bouton les deplie sur place — pas de bulle flottante, la
   fiche est en overflow:hidden et son contenu defile. */
.dex-reg.en-plus{ display:none; }
.dex-regionaux.deplie .dex-reg.en-plus{ display:inline-flex; }
.dex-reg-plus{
  font-family:var(--font-data); font-size:10px; font-weight:600;
  color:var(--ink-faint);
  background:none; border:1px dashed var(--card-border);
  border-radius:7px; padding:2px 8px;
  align-self:center; cursor:pointer;
  transition:border-color 120ms, color 120ms;
}
.dex-reg-plus:hover{ border-color:var(--teinte); color:var(--teinte); }
.dex-reg-plus:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }

.etats{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.etat{
  font-family:var(--font-body); font-size:11.5px; font-weight:700;
  border-radius:999px; padding:6px 14px;
  border:1.5px solid var(--card-border);
  background:var(--screen); color:var(--ink-soft);
  cursor:pointer;
}
.etat.actif{ box-shadow:0 0 0 2px var(--ink-soft); }
.etat.on{ background:var(--caught); border-color:var(--caught); color:#fff; }
.etat.on.or{
  background:linear-gradient(180deg,#ffcf5c,var(--gold));
  border-color:var(--gold-deep); color:#3a2405;
}
.etat:focus-visible{ outline:2.5px solid var(--dex-red); outline-offset:2px; }

/* ---- Les blocs, tels quels dans PokeArchive --------------------- */
.corps{ padding:18px 26px 26px; display:flex; flex-direction:column; gap:14px; }
.bloc{
  background:var(--screen);
  border:1px solid var(--card-border);
  border-radius:11px;
  padding:13px 15px;
}
.bloc > h4{
  font-family:var(--font-data);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600;
  margin:0 0 9px;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.bloc > h4 em{
  font-style:normal; letter-spacing:0; text-transform:none;
  font-family:var(--font-body); font-size:11px; color:var(--ink-faint);
}
/* Deux colonnes en FLUX, et non deux piles assignees a la main.
   ------------------------------------------------------------------
   Avant : une grille de deux colonnes, a gauche ce que le Pokemon EST,
   a droite ou on le TROUVE. Le classement se lisait bien, mais les deux
   moities ne se valent pas — mesurees sur six especes, la gauche tenait
   dans 30 px d'amplitude quand la droite allait de 596 a 1 034 px selon
   le nombre de jeux ou l'espece se croise. Arbok laissait 344 px de vide
   sous sa colonne droite.

   Le multi-colonnes repartit les blocs lui-meme et sort deux colonnes de
   meme hauteur, espece par espece. On y perd le classement ; on y gagne
   qu'aucune fiche ne s'arrete a mi-hauteur d'un cote. L'ordre de lecture
   ne bouge pas : il descend la premiere colonne, puis la seconde.

   break-inside sur les blocs : sans lui, un bloc se couperait en deux au
   changement de colonne — un tableau de statistiques a cheval, la moitie
   d'une liste d'obtention en haut de la colonne suivante. */
.colonnes{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
}
/* Le bloc des statistiques couvre les trois rangees que remplissent, en face,
   la notice, la lignee et la reproduction. Sa hauteur devient donc EGALE a
   leur somme — non par un reglage, mais parce que la grille ne sait pas faire
   autrement. Les deux colonnes finissent au meme pixel, quelle que soit
   l'espece, et il n'y a plus de vide sous la plus courte.

   minmax(0,1fr) et non 1fr : le minimum automatique d'un element de grille
   vaut la largeur minimale de son contenu, et la barre de raccourcis
   d'obtention est une rangee qui ne passe pas a la ligne — trente puces, deux
   mille six cents pixels. Sans ce minmax, elle ecrasait la colonne d'en face
   a deux cents pixels et debordait de la carte. */
.bloc-stats{ grid-row:span 3; }
/* Sur l'onglet d'un jeu, « Disponible dans » n'a rien a dire et disparait : la
   derniere rangee n'aurait plus qu'une case sur deux. La premiere apparition
   prend alors toute la largeur. */
.colonnes.sans-jeux #ficheBlocPremier{ grid-column:1 / -1; }

/* ---- 2. Les talents : le bloc qui change vraiment ---------------
   Avant : deux pastilles avec le nom, et l'effet cache dans un
   title="". Ici, chaque talent devient une carte a part entiere.
   ---------------------------------------------------------------- */
.talents{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.talent{
  background:var(--card);
  border:1px solid var(--card-border);
  border-left:3px solid var(--ink-faint);
  border-radius:10px;
  padding:12px 14px;
  display:flex; flex-direction:column; gap:8px;
}
.talent.cache{ border-left-color:var(--gold); }
.talent-rang{
  font-family:var(--font-data); font-size:8.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
.talent.cache .talent-rang{ color:var(--gold); }
.talent-nom{
  font-size:19px; font-weight:800; line-height:1.15; margin:0;
  letter-spacing:-.01em;
}
.talent-nom span{
  display:block;
  font-family:var(--font-data); font-size:10.5px; font-weight:500;
  letter-spacing:.04em; color:var(--ink-faint); margin-top:2px;
}
/* Le texte du jeu, cite comme tel. */
.talent-jeu{
  margin:0; font-size:12.5px; line-height:1.5; color:var(--ink-soft);
  border-left:2px solid var(--card-border); padding-left:10px;
  font-style:italic;
}
.talent-jeu cite{ font-style:inherit; }
.talent-jeu b{
  display:block; font-style:normal; font-family:var(--font-data);
  font-size:8.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:3px;
}
/* Le chiffre derriere la phrase. C'est lui qu'on vient chercher. */
.talent-effet{
  margin:0; font-size:13px; line-height:1.5; color:var(--ink);
  background:var(--screen); border-radius:8px; padding:9px 11px;
}
.talent-effet b{
  display:block; font-family:var(--font-data);
  font-size:8.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:3px;
}
.talent-effet code{
  font-family:var(--font-data); font-size:12.5px; font-weight:700;
  color:var(--teinte);
}
.talent-notes{ display:flex; flex-direction:column; gap:5px; margin-top:auto; }
.note-pastille{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-data); font-size:10px; font-weight:600;
  line-height:1.4;
  border-radius:7px; padding:4px 8px;
  border:1px solid var(--card-border); color:var(--ink-faint);
  background:var(--screen);
}
.note-pastille.compte{ color:var(--caught); border-color:var(--caught); background:var(--caught-soft); }
.note-pastille.or{ color:var(--gold-deep); border-color:var(--gold); }
.note-pastille.ailleurs{ color:var(--dex-red); border-color:var(--dex-red); }
.note-pastille i{ font-style:normal; }

/* Un talent seul ne laisse pas de case vide a cote de lui : il prend la ligne.
   Une espece en porte un, deux ou trois, et la grille en compte deux. */
.talents.impair .talent:last-child{ grid-column:1 / -1; }

/* ---- 2 bis. La notice du Pokedex -------------------------------
   Elle a son bloc, en bas de la colonne de gauche : c'est du Pokemon
   qu'elle parle, et c'est cette colonne-la qui le decrit. Pas de
   cadre a elle — le bloc en tient lieu, comme pour tout le reste de
   la fiche ; la citation en italique et le filet a la teinte du type
   suffisent a la distinguer d'un paragraphe ordinaire.
   ---------------------------------------------------------------- */
.notice{ display:flex; flex-direction:column; gap:5px; }
.notice:empty{ display:none; }
/* Le nom de la version, au-dessus de sa notice. Deux versions d'un meme jeu
   n'ecrivent pas la meme chose — et quand elles ecrivent la meme, les nommer
   toutes les deux repond quand meme a la question posee : on ouvre le Pokedex
   de Rouge, pas celui de « Rouge et Bleu ». */
.notice-version{
  font-family:var(--font-data); font-size:8.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--teinte);
  margin-top:4px;
}
.notice-version:first-child{ margin-top:0; }
/* 13 px et non 14, interligne 1.5 et non 1.6 : deux notices tiennent la ou une
   seule tenait, sans que le bloc double de hauteur. */
.notice-texte{
  margin:0 0 3px; font-size:13px; line-height:1.5; color:var(--ink);
  font-style:italic;
  border-left:2px solid var(--teinte-appui); padding-left:11px;
}
.notice-texte cite{ font-style:inherit; }
.notice-pied{ display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }

/* ---- 3. Statistiques ------------------------------------------- */
.stats{ display:flex; flex-direction:column; gap:5px; }
.stat{
  display:grid; grid-template-columns:74px 1fr 34px 58px;
  align-items:center; gap:9px;
}
.stat > span{ font-size:12px; color:var(--ink-soft); }
.stat > b{
  font-family:var(--font-data); font-size:12px; color:var(--ink);
  text-align:right; font-variant-numeric:tabular-nums;
}
.stat > i{
  display:block; height:7px; border-radius:4px;
  background:var(--card); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--card-border);
}
.stat > i em{ display:block; height:100%; border-radius:4px; background:var(--caught); }
.stat.faible > i em{ background:#c9694f; }
.stat.forte  > i em{ background:var(--gold); }
/* Le rang : 134 en Attaque ne veut rien dire seul. 33e sur 1025, si. */
.stat-rang{
  font-family:var(--font-data); font-size:9.5px; color:var(--ink-faint);
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.stat-rang.haut{ color:var(--gold-deep); font-weight:700; }
.stat.total{ border-top:1px solid var(--card-border); padding-top:7px; margin-top:3px; }
.stat.total > span{ color:var(--ink); font-weight:700; }
.stat.capture{ border-top:1px solid var(--card-border); padding-top:7px; margin-top:3px; }
.stat.capture > i em{ background:var(--dex-red); }

/* Le tableau des valeurs reelles : la fiche donnait des bases nues. */
.paliers{ margin-top:11px; padding-top:10px; border-top:1px solid var(--card-border); }
.paliers-titre{
  font-family:var(--font-data); font-size:8.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 6px;
}
.paliers-titre span{ text-transform:none; letter-spacing:0; font-family:var(--font-body); }
.tableau-defile{ overflow-x:auto; }
table.paliers-table{
  width:100%; border-collapse:collapse;
  font-family:var(--font-data); font-size:11px;
  font-variant-numeric:tabular-nums;
}
.paliers-table th, .paliers-table td{
  text-align:right; padding:3px 6px; white-space:nowrap;
}
.paliers-table th:first-child, .paliers-table td:first-child{
  text-align:left; font-family:var(--font-body); font-size:12px; color:var(--ink-soft);
}
.paliers-table thead th{
  font-size:8.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); border-bottom:1px solid var(--card-border); padding-bottom:5px;
}
.paliers-table td{ color:var(--ink); }
.paliers-table td .min{ color:var(--ink-faint); }

.effort{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  margin-top:10px; padding-top:9px; border-top:1px solid var(--card-border);
}
.effort-titre{
  font-family:var(--font-data); font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:600; width:100%;
}
.effort-puce{
  padding:2px 9px; border-radius:999px;
  background:var(--caught-soft); color:var(--caught);
  font-family:var(--font-data); font-size:11px; font-weight:700;
}

/* ---- 4. Affinites ---------------------------------------------- */
/* Meme hauteur sur toutes les fiches, pour que la carte soit pleine et que la
   colonne ne change pas de taille d'une espece a l'autre.

   Les deux hauteurs sont MESUREES, et non estimees :

     · les affinites ont ete rendues pour les 171 combinaisons de types
       possibles — dix-huit types seuls et cent cinquante-trois paires. Elles
       vont de 249 a 310 px ; le maximum est Combat / Tenebres, six lignes.
       310 px couvre donc toutes les especes qui existent et toutes celles qui
       pourraient exister sans nouveau type ;

     · la notice a ete rendue avec le plus long des 7 149 textes de la reserve
       — 237 caracteres — le plus long nom de jeu (Diamant Etincelant / Perle
       Scintillante) et ses DEUX pastilles, le cas ou l'espece ne figure pas
       dans le jeu ouvert : 188 px.

   Les deux hauteurs se mesurent en offsetHeight et NON en
   getBoundingClientRect : la modale s'ouvre sur une animation scale(0.92), et
   le rectangle rendu est celui de la boite transformee. Mesuree ainsi, la
   pire combinaison donnait 285 px au lieu de 310 — un bloc trop court de
   vingt-cinq pixels, et trois especes sur quatorze qui debordaient.

   min-height et non height : sur un ecran etroit ou avec une police plus
   grande, le texte doit pouvoir pousser plutot que d'etre coupe. La hauteur
   n'est alors plus uniforme, mais rien ne disparait — et sous 860 px la fiche
   passe de toute facon a une seule colonne. */
.affinites{ display:flex; flex-direction:column; gap:6px; min-height:310px; }
.affinite{ display:flex; align-items:flex-start; gap:9px; }
.affinite-mult{
  flex-shrink:0; min-width:58px;
  padding:2px 8px; border-radius:7px;
  font-family:var(--font-data); font-size:11px; font-weight:700;
  text-align:center; line-height:1.5;
  background:var(--card); border:1px solid var(--card-border); color:var(--ink-soft);
}
.affinite-types{ display:flex; flex-wrap:wrap; gap:4px; padding-top:1px; }
.affinite.tres-faible .affinite-mult{ background:var(--dex-red); border-color:var(--dex-red); color:#fff; }
.affinite.faible .affinite-mult{ color:var(--dex-red); border-color:var(--dex-red); }
.affinite.resiste .affinite-mult{ color:var(--caught); border-color:var(--caught); }
.affinite.tres-resiste .affinite-mult{ background:var(--caught); border-color:var(--caught); color:#fff; }
.affinite.immunise .affinite-mult{ background:var(--ink); border-color:var(--ink); color:var(--screen); }
/* Le neutre ne decide aucun combat : il est la pour completer la table, donc
   il passe sous un filet et se tient plus bas que les cinq autres lignes. */
.affinite.neutre{
  margin-top:3px; padding-top:8px;
  border-top:1px dashed var(--card-border);
}
.affinite.neutre .affinite-mult{ color:var(--ink-faint); border-style:dashed; }
.affinite.neutre .affinite-types img{ opacity:.62; }
.affinite-note{
  margin:9px 0 0; padding-top:8px; border-top:1px solid var(--card-border);
  font-size:11.5px; line-height:1.5; color:var(--ink-faint);
}
.affinite-note b{ color:var(--dex-red); font-family:var(--font-data); font-size:11px; }

/* ---- 5. Lignee -------------------------------------------------- */
.lignee{ display:flex; flex-direction:column; gap:0; }
.evo{
  display:flex; align-items:center; gap:10px;
  padding:7px 9px; border-radius:8px;
  background:var(--card); border:1px solid var(--card-border);
}
.evo.ici{ border-color:var(--teinte); box-shadow:inset 3px 0 0 var(--teinte); }

.evo.ici .evo-nom{ color:var(--teinte); }

/* ---- 6. Reproduction -------------------------------------------- */
.repro-puces{ display:flex; gap:6px; flex-wrap:wrap; }
.repro-puce{
  font-size:11px; font-weight:700; color:#fff;
  border-radius:7px; padding:3px 10px;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
}
.repro-puce.g2{ background:#4d90d5; }
.repro-puce.g14{ background:#0b6dc3; }
/* Resserre : la reproduction partage sa colonne avec la notice et la lignee,
   et c'est leur somme qui doit tomber sur la hauteur du bloc des statistiques.
   Les marges y gagnent une quinzaine de pixels sans rien retirer. */
.genre{ display:flex; align-items:center; gap:9px; margin-top:7px; flex-wrap:wrap; }
.genre-barre{
  display:flex; flex:1 1 130px; min-width:130px; height:7px;
  border-radius:4px; overflow:hidden; background:var(--card);
  box-shadow:inset 0 0 0 1px var(--card-border);
}
.genre-barre i{ display:block; height:100%; }
.genre-barre i.male{ background:#4d90d5; }
.genre-barre i.femelle{ background:#ec8fe6; }
.genre-texte{
  font-family:var(--font-data); font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.repro-note{ margin:7px 0 0; font-size:11px; line-height:1.5; color:var(--ink-faint); }

/* ---- 7. Ou l'obtenir -------------------------------------------- */
/* ---- La rarete ----
   Une ligne, dans la bande d'identite. La couleur porte le palier : on la lit
   avant le chiffre, et le chiffre precise. */
.fiche-rarete{
  margin:7px 0 0; align-self:flex-start;
  padding:3px 9px 4px; border-radius:999px;
  border:1px solid var(--card-border); background:var(--card);
  font-family:var(--font-data); font-size:10px; letter-spacing:.03em;
  color:var(--ink-soft);
}
.fiche-rarete.unique,
.fiche-rarete.tres-rare{ color:var(--gold); border-color:var(--gold); }
.fiche-rarete.rare{ color:var(--dex-red); border-color:var(--dex-red); }
.fiche-rarete.commun{ color:var(--ink-faint); }

/* ---- La fiche de capture ----
   Repliee derriere une poignee discrete : c'est le seul endroit de la fiche
   qui parle de TON exemplaire et non de l'espece, et il ne doit pas se
   confondre avec le reste. Un debutant ne la croise jamais — elle n'existe
   que sur une entree deja cochee. */
/* ---- Ou il est en ce moment ----
   Trois boutons, un seul clic. C'est le champ qu'on met a jour le plus
   souvent — a chaque transfert — et il merite d'etre devant, pas au fond
   d'une fiche repliee. */
/* DANS LA FENETRE, en tete. « Ou il est » et « ce qu'il a de particulier » sont
   deux reponses sur le meme exemplaire : les separer obligeait a les tenir a
   jour a deux endroits de l'ecran. */
.capture-ou{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:0;
  padding-bottom:12px; border-bottom:1px solid var(--card-border);
}
.capture-ou .capture-ou-titre{
  flex:0 0 100%; margin:0 0 2px;
  display:flex; align-items:center; gap:5px;
}
.capture-ou[hidden]{ display:none; }
.capture-ou-titre{
  font-family:var(--font-data); font-size:8.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  margin-right:3px;
}
.capture-ou-btn{
  padding:4px 10px 5px; cursor:pointer;
  border:1px solid var(--card-border); border-radius:999px;
  background:var(--card); color:var(--ink-soft);
  font-family:var(--font-data); font-size:10px; white-space:nowrap;
}
.capture-ou-btn:hover{ border-color:var(--teinte); color:var(--ink); }
.capture-ou-btn:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }
.capture-ou-btn.actif{
  background:var(--teinte); border-color:var(--teinte); color:var(--card);
}
/* La Banque est une impasse depuis mars 2023 : le dire par la couleur, pas
   seulement dans l'infobulle. */
.capture-ou-btn.actif.bloque{
  background:var(--danger); border-color:var(--danger); color:#fff;
}
/* Tant qu'elle fonctionne, la Banque est un avertissement et non une erreur. */
.capture-ou-btn.actif.sursis{
  background:var(--gold); border-color:var(--gold); color:#231d05;
}

/* LA FENETRE DE LA FICHE DE CAPTURE. Plus large que la colonne ou vivait le
   formulaire, et bornee en hauteur : une dizaine de champs sur un portable
   depassent l'ecran, et un formulaire qu'on ne peut pas faire defiler est un
   formulaire qu'on ne peut pas finir.

   AU-DESSUS DE LA FICHE, ET IL FAUT LE DIRE. Toutes les modales partagent le
   meme z-index ; a egalite, c'est l'ordre du document qui tranche, et celle-ci
   est declaree avant la fiche. Elle s'ouvrait donc DERRIERE elle : le clic
   marchait, la fenetre existait, on ne voyait rien. Elle s'ouvre depuis la
   fiche, elle passe devant. */
#captureOverlay{ z-index:60; }
.capture-fenetre{
  width:100%; max-width:560px;
  max-height:88vh; overflow-y:auto;
  text-align:left; position:relative;
}
.capture-fenetre .modal-note{ margin:0 0 14px; }
/* Dans la fenetre, le bloc n'a plus de liseré : il EST la fenetre, et un cadre
   dans un cadre ne dit rien de plus. */
.capture-fenetre .capture-bloc{
  margin-top:12px; padding:0;
  background:none; border:0; border-left:0;
}
.capture-poignee:hover{ border-color:var(--gold); color:var(--gold); }
.capture-poignee:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }
.capture-poignee[aria-expanded="true"]{
  border-style:solid; border-color:var(--gold); color:var(--gold);
}

.capture-bloc{
  margin-top:9px; padding:12px 13px 13px;
  background:var(--card); border:1px solid var(--card-border);
  border-left:3px solid var(--gold); border-radius:11px;
  /* A GAUCHE, EXPLICITEMENT. La carte se lisait centree — ce qui
     convient a un nom et a deux boutons, mais pas a un formulaire : les
     etiquettes se centraient au-dessus de champs alignes a gauche, et chaque
     ligne partait d'un endroit different. Le meme piege avait deja attrape le
     bloc des changelogs, qui porte la meme correction. */
  text-align:left;
}
.capture-note{
  margin:0 0 10px; font-size:11px; line-height:1.5; color:var(--ink-faint);
}
.capture-grille{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:9px;
}
.capture-champ{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.capture-champ.large{ grid-column:1 / -1; }
.capture-label{
  font-family:var(--font-data); font-size:8.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
}
.capture-saisie{
  width:100%; height:31px; padding:0 8px; min-width:0;
  border:1px solid var(--card-border); border-radius:8px;
  background:var(--screen); color:var(--ink);
  font-family:var(--font-body); font-size:12.5px;
}
.capture-saisie:focus-visible{ outline:2px solid var(--dex-red); outline-offset:1px; }
/* La regle ci-dessus sert aux <input> du formulaire. Les <select> — nature,
   jeu, listes — passent par menus.js : le natif devient invisible et c'est le
   wrap qui occupe la place, d'ou cette largeur a part. */
.capture-champ .select-wrap{ width:100%; }
.capture-vider{ margin-top:11px; font-size:11.5px; padding:5px 11px; }

/* ---- Comment le faire remonter ----
   Le meme modele que « Ou l'obtenir » : une ligne par chemin, le liseré a
   gauche disant si le chemin est ouvert (vert), ferme (rouge) ou inexistant
   (gris). La couleur porte l'information, pas seulement le texte. */
.transfert{ display:flex; flex-direction:column; gap:8px; }
.transfert-ligne{
  background:var(--card); border-radius:9px; padding:9px 11px;
  border:1px solid var(--card-border);
  border-left:3px solid var(--ink-faint);
}
.transfert-ligne.ouvert{ border-left-color:var(--caught); }
/* En sursis : or, comme tout ce qui demande une action dans l'application. Le
   rouge est reserve a ce qui est perdu — le confondre ferait renoncer a un
   chemin qui marche encore. */
.transfert-ligne.sursis{ border-left-color:var(--gold); }
.transfert-ligne.ferme{ border-left-color:var(--danger); }
.transfert-depuis{
  font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.45;
}
.transfert-chemin{
  display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:5px;
  font-family:var(--font-data); font-size:11px; color:var(--ink-soft);
}
.transfert-pas{
  border:1px solid var(--card-border); border-radius:999px; padding:2px 8px 3px;
  background:var(--screen);
}
/* Un service ferme se barre : la phrase l'explique, le trait le montre. */
.transfert-pas.barre{
  text-decoration:line-through; color:var(--danger); border-color:var(--danger);
}
/* Un service en sursis se souligne : il marche, mais pas pour toujours. */
.transfert-pas.compte{
  color:var(--gold); border-color:var(--gold);
  text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px;
}
.transfert-fleche{ color:var(--ink-faint); }
.transfert-note{
  margin-top:6px; font-size:11.5px; line-height:1.5; color:var(--ink-soft);
}
.transfert-ligne.ferme .transfert-note{ color:var(--danger); }
.transfert-ligne.sursis .transfert-note{ color:var(--gold); }

.obtention{ display:flex; flex-direction:column; gap:8px; max-height:330px; overflow-y:auto; }
.obt-ligne{
  background:var(--card); border-radius:9px; padding:8px 11px;
  border-left:3px solid var(--dex-red);
  border-top:1px solid var(--card-border);
  border-right:1px solid var(--card-border);
  border-bottom:1px solid var(--card-border);
}
.obt-ligne.par-evolution{ border-left-color:var(--gold); }
.obt-ligne.par-echange{ border-left-color:var(--ink-faint); }
.obt-jeu{
  font-size:12.5px; font-weight:700; color:var(--ink);
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.obt-cat{
  font-family:var(--font-data); font-size:8.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:5px; padding:1px 6px;
  color:var(--dex-red); border:1px solid var(--dex-red);
}
.obt-cat.evolution{ color:var(--gold-deep); border-color:var(--gold); }
.obt-cat.echange{ color:var(--ink-faint); border-color:var(--card-border); }
.obt-lieu{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.obt-lieu span{ display:block; }
/* Le nom d'une espece citee dans une ligne d'obtention : « Faire evoluer
   Kadabra » ouvre la fiche de Kadabra, sur l'onglet ou l'on est deja. Il se
   lit comme du texte souligne et non comme un bouton — c'est un renvoi dans
   une phrase, pas une commande. */
.obt-espece{
  font:inherit; color:var(--teinte);
  background:none; border:0; padding:0;
  text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--teinte-appui);
  cursor:pointer;
}
.obt-espece:hover{ color:var(--dex-red); text-decoration-color:var(--dex-red); }
.obt-espece:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; border-radius:3px; }
.obt-detail{
  font-family:var(--font-data); font-size:10.5px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.obt-plus{
  font-family:var(--font-data); font-size:10px; color:var(--ink-faint);
  padding:2px 0 0 2px;
}

.jeux-liste{ display:flex; gap:5px; flex-wrap:wrap; }
.jeu-puce{
  font-size:11px; font-weight:600; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--card-border);
  border-radius:7px; padding:3px 9px;
}
.jeu-puce.premier{ background:var(--dex-red); border-color:var(--dex-red); color:#fff; }

/* ---- 8. Attaques ------------------------------------------------ */
.onglets{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
.onglet{
  font-family:var(--font-body); font-size:11px; font-weight:600;
  border:1px solid var(--card-border); border-radius:7px;
  background:var(--card); color:var(--ink-soft);
  padding:4px 10px; cursor:default;
}
.onglet.actif{ background:var(--dex-red); border-color:var(--dex-red); color:#fff; }
table.attaques{
  width:100%; border-collapse:collapse; font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
.attaques thead th{
  font-family:var(--font-data); font-size:8.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  text-align:right; padding:0 7px 6px;
  border-bottom:1px solid var(--card-border); white-space:nowrap;
}
.attaques thead th.g{ text-align:left; }
.attaques tbody td{
  padding:5px 7px; border-bottom:1px solid var(--card-border);
  text-align:right; white-space:nowrap;
}
.attaques tbody tr:last-child td{ border-bottom:0; }
.attaques td.nv{
  font-family:var(--font-data); font-size:11.5px; color:var(--ink-faint);
  text-align:left; width:44px;
}
.attaques td.nom{ text-align:left; font-weight:600; }
.attaques td.type{ text-align:left; width:112px; }
.attaques td.cat{ text-align:left; width:88px; }
.attaques td.chiffre{ font-family:var(--font-data); font-size:11.5px; color:var(--ink); }
.attaques td.chiffre.vide{ color:var(--ink-faint); }

.cat-puce.physique{ background:#c9694f; }
.cat-puce.speciale{ background:#5269ac; }
.cat-puce.statut{ background:#9099a1; }

/* --- responsive --- */
/* ---- Etroit ------------------------------------------------------ */
@media (max-width:860px){
  .identite{ grid-template-columns:1fr; gap:18px; padding:20px 18px 18px; }
  .portrait{ max-width:260px; margin:0 auto; }
  .nom{ font-size:31px; }
  .colonnes{ columns:1; }
  .talents{ grid-template-columns:1fr; }
  /* Une seule colonne : le talent isole n'a plus de case vide a combler. */
  .talents.impair .talent:last-child{ grid-column:auto; }
  .corps{ padding:14px 18px 20px; }
  .obtention{ max-height:none; }
}
@media (max-width:560px){
  .type-img{ width:78px; height:17px; }
  .stat{ grid-template-columns:64px 1fr 30px; }
  .stat-rang{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* La note d'époque, au-dessus des faiblesses. Elle n'apparaît que sur un jeu
   d'avant la sixième génération : ailleurs, la table est celle qu'on connaît et
   il n'y a rien à expliquer. Discrète — c'est un avertissement, pas un titre. */
.affinites-epoque{
  margin:0 0 8px;
  font-family:var(--font-data);
  font-size:9.5px; font-weight:700;
  letter-spacing:.06em;
  line-height:1.5;
  color:var(--gold-deep);
}

/* ---- Le plan de rangement -------------------------------------------------
   Une ligne sur la fiche, pas un panneau : c'est un renseignement qu'on lit en
   une seconde, la console dans l'autre main. */
.fiche-rangement{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  margin-top:8px; padding:7px 11px;
  background:var(--screen); border-radius:8px;
}

/* LES AUTRES ET TOI, sous le portrait. Trois choses qui parlent de la meme
   question — qui d'autre l'a, est-ce que je le cherche, a qui je le montre — et
   qui trainaient en trois morceaux de largeurs differentes dans la colonne de
   droite, deja la plus longue des deux. Elles tiennent dans une carte, posee
   dans la plage vide que le portrait laissait sous lui.

   EMPILEES ET NON EN RANGEE : la colonne fait 264 px, et « L'envoyer a
   quelqu'un » en demande a lui seul les deux tiers. Cote a cote, ils
   s'enroulaient en deux lignes inegales.

   `text-align:left` reste ecrit : la carte s'est alignee a gauche depuis, mais
   une carte ne doit pas dependre du reglage d'un ancetre pour se lire droit. */
.fiche-actions{
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  margin:0; padding:10px 11px;
  background:var(--screen); border-radius:12px;
  text-align:left;
}
/* Dans la carte, ils n'ont plus a se pousser eux-memes : c'est elle qui tient
   l'ecart et le retrait. Le contenu part a gauche — centre, un bouton pleine
   largeur laisse son icone flotter au milieu de rien. */
.fiche-actions .fiche-cherche{
  margin-top:0; align-self:stretch; justify-content:flex-start;
}

/* LA RARETE PERD SA PASTILLE EN ENTRANT. Dehors, le cadre arrondi la
   distinguait du vide ; dedans, il ferait une bordure DANS une bordure — et sa
   couleur de fond, --card, se detacherait du --screen de la carte. Il ne reste
   que la couleur du texte, qui est la seule chose qu'elle disait vraiment. */
.fiche-actions .fiche-rarete{
  margin:0; padding:0 1px;
  border:0; border-radius:0; background:none;
  align-self:stretch; line-height:1.45;
}
.rangement-ou{
  font-family:var(--font-body); font-size:13.5px; font-weight:700; color:var(--ink);
}
.rangement-quoi{
  flex:1 1 auto;
  font-family:var(--font-data); font-size:10px; color:var(--ink-faint);
}
.rangement-y-aller{
  flex:0 0 auto;
  border:none; background:none; padding:0; cursor:pointer;
  font-family:var(--font-data); font-size:10px; color:var(--ink-soft);
  text-decoration:underline;
}
.rangement-y-aller:hover{ color:var(--ink); }