/* Ce qui est propre à PokéArchive : la connexion Discord et la liste des
   dresseurs. Le reste du design vient de base.css, accueil.css et dex.css. */

/* L'attribut « hidden » est une règle de l'agent utilisateur : n'importe quel
   sélecteur de classe la bat, et l'élément resterait affiché. */
[hidden]{ display:none !important; }

/* ---- Le boîtier occupe la fenêtre ----
   base.css est écrit pour une page web, où le boîtier est centré à 980 px sur
   fond de page. Dans une fenêtre d'application, ce cadrage laisse une large
   bande vide sous l'appareil : ici le boîtier *est* la fenêtre. */
html, body{ height:100%; }
body{
  padding:14px;
  align-items:stretch;
  background:#0b0c10;
}
.dex{
  max-width:none;
  display:flex; flex-direction:column;
  padding:16px 18px;
}
.screen-frame{ flex:1; min-height:0; display:flex; }
.screen{ flex:1; min-height:0; overflow-y:auto; }
html[data-theme="light"] body{ background:#e9e7e0; }

/* ---- Bouton Discord ---- */
.discord-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  font-family:var(--font-body); font-size:14.5px; font-weight:700;
  color:#fff; background:#5865f2;
  border:none; border-radius:10px;
  padding:12px 18px;
  margin-bottom:12px;
  cursor:pointer;
  transition:background 120ms, transform 80ms;
}
.discord-btn:hover:not(:disabled){ background:#4752c4; }
.discord-btn:active:not(:disabled){ transform:translateY(1px); }
.discord-btn:focus-visible{ outline:2.5px solid var(--ink); outline-offset:3px; }
.discord-btn:disabled{ opacity:.7; cursor:progress; }
.discord-btn svg{ width:22px; height:auto; flex-shrink:0; }

.auth-note{
  font-size:12px; line-height:1.5; color:var(--ink-faint);
  text-align:center; margin:0 0 14px;
}

/* ---- Le badge du dresseur, dans le boîtier ---- */
.player-badge img{
  width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.25);
  margin-right:2px;
}
.player-badge .quitter{
  font-family:var(--font-body); font-size:11px; font-weight:600;
  color:rgba(255,255,255,.7); background:none;
  border:none; border-left:1px solid rgba(255,255,255,.3);
  padding:0 0 0 8px; margin-left:2px; cursor:pointer;
}
.player-badge .quitter:hover{ color:#fff; }

/* ---- Les jeux, en cartes ----
   Une carte par jeu : la jaquette en grand, l'avancement dessous. A vingt
   jeux, des lignes de texte se ressemblaient toutes ; une jaquette se
   reconnait d'un coup d'oeil. */
/* Les visuels sont des bannières panoramiques (~698x156) : les deux versions
   d'un même jeu y figurent côte à côte. Il leur faut de la largeur — dans une
   case de 158 px le logo tombait à 29 px de haut, illisible. */
.jeux{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(272px, 1fr));
  gap:14px;
}

.jeu-carte{
  display:flex; flex-direction:column; gap:8px;
  padding:10px 10px 12px;
  font-family:var(--font-body);
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  cursor:pointer;
  transition:border-color 120ms, transform 90ms, background 120ms;
}
.jeu-carte:hover{ border-color:var(--dex-red); transform:translateY(-2px); }
.jeu-carte:focus-visible{ outline:2.5px solid var(--dex-red); outline-offset:2px; }

/* Pokémon HOME est une carte comme les autres, et elle le reste jusqu'au bout :
   ni liseré doré, ni format d'image à part. Elle a porté les deux, au motif
   que ce n'est pas un jeu mais le coffre où tout se retrouve — sa jaquette et
   son compteur le disent déjà, et une grille de vingt-quatre cartes se lit
   mieux quand une seule règle les gouverne toutes.

   .jeu-home sert encore : accueil.js s'en sert pour reconnaître la carte et
   la poser au bon rang. Elle n'a simplement plus de dessin propre. */

/* Le cadre n'impose plus de hauteur : une bannière prend toute la largeur et
   sa hauteur suit son rapport. La colonne et l'écart servent aux jeux qui
   déclareraient plusieurs visuels — ils s'empilent alors sans réglage. */
.jeu-jaquette{
  display:flex; flex-direction:column; gap:3px;
  align-items:center; justify-content:center;
  background:var(--screen);
  border-radius:10px;
  overflow:hidden;
}
.jeu-jaquette img{ width:100%; height:auto; display:block; }

/* Tous les jeux ont aujourd'hui leur bannière ; ce repli reste au cas où l'on
   ajouterait un jeu sans visuel, ou avec une vignette carrée. Il ramène le
   cadre au format d'une bannière — sans quoi une image carrée rendrait sa
   carte deux fois plus haute que ses voisines. */
.jeu-jaquette.vignette{ aspect-ratio:698 / 156; padding:6px; }
.jeu-jaquette.vignette img{ width:auto; height:100%; object-fit:contain; }

/* La bannière HOME n'a plus d'exception. Elle mesurait 1841x156 — un rapport
   de 11,8 contre 4,5 pour les autres — et il fallait lui imposer le format
   commun, « cover » rognant les côtés pour la faire entrer.
   Elle a été recadrée à 698x156, exactement sur ce que « cover » montrait :
   le logo au centre, le décor pastel de part et d'autre. Même format que les
   vingt-trois autres, donc même règle, donc plus de règle du tout. */
.jeu-secours{
  font-size:12.5px; font-weight:700; color:var(--ink-soft);
  text-align:center; line-height:1.35;
}

/* Le creux du modèle : le fond de l'écran, cerné d'un filet à l'intérieur.
   Toutes les barres d'avancement de l'application le portent désormais. */
.jeu-jauge{
  display:block; height:5px; border-radius:4px;
  background:var(--screen); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--card-border);
}
.jeu-jauge i{ display:block; height:100%; width:0; border-radius:4px; background:var(--caught); }

.jeu-avancee{
  display:flex; align-items:baseline; justify-content:center; gap:8px;
  font-family:var(--font-data); font-size:12.5px;
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
.jeu-avancee b{ color:var(--ink); font-weight:600; }
.jeu-avancee em{ font-style:normal; font-size:11.5px; color:var(--gold); }
.jeu-avancee.complet b{ color:var(--caught); }
.jeu-avancee.attente{ color:var(--ink-faint); }

@media (max-width:720px){
  /* En dessous de deux colonnes de bannière lisible, on n'en met qu'une. */
  .jeux{ grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); }
}

/* ---- Liste des dresseurs ---- */
.dresseurs{ display:flex; flex-direction:column; gap:7px; }
.dresseur-ligne.moi{ border-color:var(--dex-red); }
.dresseur-ligne .nom{
  flex:1; font-weight:700; font-size:14px; letter-spacing:-.01em; color:var(--ink);
}
.dresseur-ligne .rang{
  font-family:var(--font-data); font-size:11px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
  min-width:22px;
}
.dresseur-ligne .score{
  font-family:var(--font-data); font-size:12.5px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dresseur-ligne .score b{ color:var(--ink); font-weight:600; }

/* ---- Les aventures ----
   Une ligne par aventure : on l'ouvre en cliquant dessus, les trois boutons de
   droite agissent sans l'ouvrir. */
.profil-card{ max-width:560px; text-align:left; }
.profil-liste{ display:flex; flex-direction:column; gap:8px; margin:14px 0 12px; }

.profil-ligne{
  display:flex; align-items:center; gap:10px;
  background:var(--screen); border:1px solid var(--card-border);
  border-radius:10px; padding:9px 11px;
}
.profil-ligne.courante{ border-color:var(--dex-red); }

.profil-ouvrir{
  flex:1; display:flex; flex-direction:column; gap:2px;
  background:none; border:none; padding:0; cursor:pointer; text-align:left;
  font-family:var(--font-body); color:var(--ink);
}
.profil-ouvrir:hover .profil-nom{ color:var(--dex-red); }
.profil-nom{ font-size:14px; font-weight:600; }
.profil-nom .ici{ font-size:11px; color:var(--ink-faint); font-weight:400; }
.profil-chiffres{
  font-family:var(--font-data); font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

.profil-actions{ display:flex; gap:4px; flex-shrink:0; }
.profil-action{
  width:30px; height:30px; border-radius:7px; cursor:pointer;
  background:transparent; border:1px solid var(--card-border);
  color:var(--ink-soft); font-size:13px; line-height:1;
  transition:border-color 120ms, color 120ms;
}
.profil-action:hover{ border-color:var(--dex-red); color:var(--ink); }
.profil-action.active{ border-color:var(--gold); color:var(--gold); }
.profil-action.danger:hover{ border-color:#c9694f; color:#c9694f; }

.profil-creation{ display:flex; gap:8px; }
.profil-creation input{
  flex:1; padding:8px 11px; border-radius:10px;
  background:var(--screen); border:1px solid var(--card-border);
  color:var(--ink); font-family:var(--font-body); font-size:13px;
}
.profil-creation input:focus{ outline:2px solid var(--dex-red); outline-offset:1px; }

/* ---- Menu du compte ----
   Le pseudo ouvre un panneau : identité, aventures, réinitialisation,
   déconnexion. « Quitter » était auparavant collé au nom, sur quelques pixels. */
.compte-menu{ position:relative; }
.player-badge .chevron{ font-size:10px; opacity:.7; margin-left:2px; }

.compte-panneau{
  display:none;
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  min-width:250px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:11px;
  padding:6px;
  box-shadow:var(--ombre);
}
.compte-panneau.ouvert{ display:block; }

.compte-entete{
  display:flex; flex-direction:column; gap:1px;
  padding:8px 10px 10px;
  border-bottom:1px solid var(--card-border);
  margin-bottom:5px;
}
.compte-pseudo{ font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--ink); }
.compte-aventure{
  font-family:var(--font-data); font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

.compte-item{
  display:flex; flex-direction:column; gap:1px;
  width:100%; text-align:left;
  padding:8px 10px; border:none; border-radius:7px;
  background:transparent; cursor:pointer;
  font-family:var(--font-body); font-size:13.5px; color:var(--ink);
}
.compte-item small{ font-size:11px; color:var(--ink-faint); }
.compte-item:hover{ background:var(--screen); }
.compte-item.danger{ color:#d4735c; }
.compte-item.danger:hover{ background:rgba(212,115,92,.12); }
.compte-separateur{ height:1px; background:var(--card-border); margin:5px 2px; }

/* ---- Recherche et visite d'un dresseur ---- */
.dresseur-recherche{ display:flex; gap:8px; margin-bottom:12px; }
.dresseur-recherche input{
  flex:1; padding:9px 12px; border-radius:10px;
  background:var(--card); border:1px solid var(--card-border);
  color:var(--ink); font-family:var(--font-body); font-size:13.5px;
}
.dresseur-recherche input:focus{ outline:2px solid var(--dex-red); outline-offset:1px; }
.dresseur-ligne .nom{ display:flex; flex-direction:column; gap:1px; }
.dresseur-ligne .nom small{
  font-family:var(--font-data); font-size:10.5px; font-weight:400; color:var(--ink-faint);
}

.dresseur-visite{ display:flex; flex-direction:column; gap:8px; }
.visite-entete{
  display:flex; align-items:center; gap:13px;
  padding:12px 14px; margin-bottom:4px;
  background:var(--card); border:1px solid var(--card-border); border-radius:11px;
}
.visite-entete img{ width:48px; height:48px; flex:none; border-radius:50%; background:var(--screen); }
/* Un pseudo herite peut compter vingt caracteres la ou douze est desormais la
   regle : il se coupe plutot que de deborder de la carte.

   Le plancher de retrecissement n'est pas pose ici : .visite-entete > div
   porte deja min-width:140px plus bas dans cette feuille, et l'emporte sur
   toute valeur qu'on mettrait a cet endroit. Cent quarante pixels suffisent
   — text-overflow s'applique des que le texte depasse la place disponible,
   pas seulement a zero. */
/* Le pseudo Discord passe au-dessus et en retrait : il identifie, il ne
   titre pas. En --font-data parce que c'est une reference exterieure, comme
   un identifiant, et non un nom que la personne a choisi ici.

   Le selecteur porte le parent : .visite-entete span vaut (0,1,1) et
   l'emportait sur la seule classe, qui ne vaut que (0,1,0). La regle etait
   ecrite mais sans effet — releve a l'essai, la ligne sortait a 11,5 px au
   lieu de 10. */
.visite-entete .visite-discord{
  display:block; font-size:16px; font-weight:400; line-height:1.25;
  color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.visite-entete strong{
  display:block; font-size:16px; line-height:1.25; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.visite-entete span{
  display:block; font-family:var(--font-data); font-size:11.5px; color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.visite-profil{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 13px;
  background:var(--card); border:1px solid var(--card-border); border-radius:10px;
}
.visite-nom{ font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink); }
.visite-chiffres{
  font-family:var(--font-data); font-size:11.5px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

/* Depuis quand il est la. Meme forme que la ligne des aventures juste au-dessus
   — c est le meme registre —, mais plus pale : c est un renseignement, pas ce
   qu on vient chercher.

   LE SELECTEUR PORTE LE PARENT, comme pour .visite-discord et pour la meme
   raison : .visite-entete span vaut (0,1,1) et l emporterait sur une classe
   seule. La regle serait ecrite et sans effet. */
.visite-entete .visite-inscrit{ color:var(--ink-faint); font-size:10.5px; }

/* ---- La carte de dresseur, vue de l exterieur ----
   Les memes briques que sur sa propre page — .partie-membre, .partie-etat,
   .partie-vignette, .partie-champ-nom — dans un encadre qui prend la forme
   de .visite-profil, juste en dessous. Deux dessins pour la meme fiche
   auraient diverge au premier ajustement. Voir js/parties.js. */
.carte-publique{
  display:flex; flex-direction:column; gap:13px;
  padding:12px 13px;
  background:var(--card); border:1px solid var(--card-border); border-radius:10px;
}
/* Le jeu et le spin-off cote a cote tant que la place le permet ; l un sous
   l autre des qu elle manque, plutot que de couper des titres de jeux. */
.carte-publique-gouts{ display:flex; flex-wrap:wrap; gap:11px 26px; }
.carte-publique-gouts > div{ display:flex; flex-direction:column; gap:3px; }
.carte-publique-gouts strong{
  font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--ink);
}
/* PAR LEUR NOM, ET NON PAR « > div ». Le selecteur d enfant vaut (0,1,1) et
   l emportait sur .carte-publique-gouts, qui n en vaut que (0,1,0) : la rangee
   du jeu et du spin-off passait en colonne, la regle ecrite juste au-dessus
   sans effet. Le meme piege que .visite-discord, releve a l essai. */
.carte-publique-zone{ display:flex; flex-direction:column; gap:7px; }
.carte-publique-phrase{
  margin:0; padding-left:9px;
  border-left:2px solid var(--gold-deep);
  font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--ink-soft);
}
/* Une ligne de jeu, sans le bouton : elle ne se deplie pas chez les autres. On
   reprend la mise en page de .partie-tete, pas sa nature. */
.carte-publique-jeu{
  display:flex; align-items:center; gap:11px;
  padding:6px 0;
  font-family:var(--font-body); font-size:13px; color:var(--ink);
}
.carte-publique-jeu + .carte-publique-note{
  margin:-3px 0 4px; padding-left:1px;
  font-family:var(--font-body); font-size:12px; line-height:1.5; color:var(--ink-soft);
}
/* Un Pokemon nomme quelque part dans l application ouvre sa fiche. Celui-ci ne
   fait pas exception : sans ce curseur, rien ne le dirait. */
.partie-membre.cliquable{ cursor:pointer; }
.partie-membre.cliquable:hover{ border-color:var(--gold-deep); }
.partie-membre.cliquable:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:1px; }

/* ---- Classement des dresseurs, nouvelle présentation ----
   L'ancienne liste alignait des chiffres nus : on ne savait pas si 152 était
   beaucoup. Une barre situe chacun par rapport au meilleur, et le podium se
   repère sans lire. */
.dresseurs{ gap:9px; }

.dr-carte{
  display:flex; align-items:center; gap:13px;
  padding:11px 14px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-left:3px solid transparent;
  border-radius:10px;
  cursor:pointer;
  transition:border-color 130ms, transform 90ms, background 130ms;
}
.dr-carte:hover{ transform:translateX(2px); border-color:var(--dex-red); }
.dr-carte:focus-visible{ outline:2.5px solid var(--dex-red); outline-offset:2px; }
.dr-carte:hover .dr-fleche{ color:var(--dex-red); transform:translateX(2px); }

.dr-carte.podium-1{ border-left-color:#e8c14a; }
.dr-carte.podium-2{ border-left-color:#b9c0c9; }
.dr-carte.podium-3{ border-left-color:#c58a5b; }
.dr-carte.moi{ background:color-mix(in srgb, var(--dex-red) 8%, var(--card)); }
.dr-carte.moi .dr-nom{ color:var(--dex-red); }

.dr-rang{
  flex-shrink:0; width:26px; text-align:center;
  font-family:var(--font-data); font-size:13px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.dr-carte.podium .dr-rang{ font-size:17px; }

.dr-avatar{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:var(--screen); object-fit:cover;
}

.dr-infos{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
/* Le pseudo Discord sous le nom choisi, a la MEME taille que lui.

   Ce qui les distingue n'est donc pas le corps mais la graisse et la
   couleur : le nom porte 700 et --ink, celui-ci 400 et --ink-soft. Les
   rapetisser aurait fait passer le pseudo Discord pour une note de bas de
   page, alors que c'est lui qui identifie quand quelqu'un s'est renomme.
   Le gap de 3px du parent suffit a les espacer. */
.dr-discord{
  font-family:var(--font-body); font-size:14.5px; font-weight:400;
  letter-spacing:-.01em; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Dans la liste d'amis, la ligne prend toute la largeur : .ami-nom est
   d'ordinaire une ligne unique, ce span la coupe en deux. */
.ami-discord{
  display:block;
  font-family:var(--font-body); font-size:13px; font-weight:400;
  color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dr-nom{
  font-family:var(--font-body); font-size:14.5px; font-weight:700;
  letter-spacing:-.01em; color:var(--ink);
  display:flex; align-items:center; gap:7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dr-nom em{
  font-style:normal; font-family:var(--font-data); font-size:8.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--dex-red); border:1px solid var(--dex-red);
  border-radius:999px; padding:1px 6px;
}
/* Ce qu'une aventure compte, quand ce n'est pas l'ordinaire. Une etiquette
   plutot qu'une couleur : « Vus » se lit, un liseré se devine. */
.dr-base{
  font-style:normal; font-family:var(--font-data); font-size:9px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); border:1px solid var(--card-border);
  border-radius:999px; padding:1px 6px; margin-left:6px;
  white-space:nowrap;
}
/* Ce que le filtre met de cote. En retrait, mais lisible : une liste
   raccourcie qui ne le dit pas ressemble a une liste complete. */
.dr-note{
  padding:10px 4px 2px; text-align:center;
  font-size:11px; color:var(--ink-faint);
}
.dr-aventure{
  font-family:var(--font-data); font-size:10.5px; color:var(--ink-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dr-barre{
  display:block; height:4px; border-radius:4px; margin-top:2px;
  background:var(--screen); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--card-border);
}
.dr-barre i{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--caught), color-mix(in srgb, var(--caught) 55%, var(--gold)));
}

.dr-scores{ flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.dr-score{
  font-family:var(--font-data); font-size:11px; color:var(--ink-faint);
  white-space:nowrap;
}
.dr-score b{ font-size:14px; font-weight:600; color:var(--ink); }
.dr-score.chroma b{ color:var(--gold); }

.dr-fleche{
  flex-shrink:0; font-size:19px; color:var(--card-border);
  transition:color 130ms, transform 130ms;
}

@media (max-width:600px){
  .dr-scores{ flex-direction:row; gap:9px; align-items:baseline; }
  .dr-avatar{ width:34px; height:34px; }
}

/* ---- Choix du dresseur à comparer ---- */
#comparerQ{
  width:100%; padding:9px 12px; margin-bottom:4px;
  border-radius:10px; background:var(--screen);
  border:1px solid var(--card-border);
  color:var(--ink); font-family:var(--font-body); font-size:13.5px;
}
#comparerQ:focus{ outline:2px solid var(--dex-red); outline-offset:1px; }
#comparerListe{ max-height:320px; overflow-y:auto; }
.comparer-choix{ flex-direction:row; align-items:center; gap:11px; }
.comparer-avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--screen); flex-shrink:0;
}
.comparer-choix > span{ display:flex; flex-direction:column; gap:2px; min-width:0; }

/* ---- Page Profil ---- */
.profil-identite{
  display:flex; align-items:center; gap:16px;
  padding:16px 18px; margin-bottom:6px;
  background:var(--card); border:1px solid var(--card-border); border-radius:11px;
}
.profil-avatar{ width:62px; height:62px; border-radius:50%; background:var(--screen); }
.profil-identite-texte{ flex:1; min-width:0; }
.profil-identite-nom{ font-family:var(--font-body); font-size:19px; font-weight:700; color:var(--ink); }
.profil-identite-sous{
  font-family:var(--font-data); font-size:11.5px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; margin-top:2px;
}

.profil-aventures{ display:flex; flex-direction:column; gap:10px; }

/* ---- Donnees jeux -----------------------------------------------------------
   Une ligne par jeu joue, repliee sur l equipe qu on y avait. Elle reprend la
   forme des aventures juste au-dessus : meme fond, meme bordure, meme rayon —
   ce sont deux listes de la meme page, et deux dessins auraient diverge au
   premier ajustement. Voir js/parties.js. */
/* La carte de dresseur : les memes champs que le corps d une partie, dans un
   seul encadre. Elle precede Donnees jeux — on se presente avant de derouler. */
.carte-dresseur{
  display:flex; flex-direction:column; gap:12px;
  padding:13px; margin-bottom:16px;
  border:1px solid var(--card-border); border-radius:11px;
  background:var(--panel);
}
.carte-dresseur select, .carte-dresseur input[type="text"]{ flex:1 1 220px; min-width:0; }
.carte-dresseur input[type="text"]{
  padding:7px 10px; border-radius:8px;
  background:var(--screen); border:1px solid var(--card-border);
  color:var(--ink); font-family:var(--font-body); font-size:12.5px;
}
.carte-dresseur input[type="text"]:focus{ outline:none; border-color:var(--gold-deep); }
.carte-favoris{ display:flex; flex-direction:column; gap:7px; }
.carte-phrase-champ{ display:flex; flex-direction:column; gap:6px; }
.carte-phrase-champ input{ width:100%; }

.parties-barre{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:11px; }
.parties-barre select{ flex:1 1 210px; min-width:0; }
.parties{ display:flex; flex-direction:column; gap:8px; }

.partie{
  border:1px solid var(--card-border); border-radius:11px;
  background:var(--panel); overflow:hidden;
}
.partie.ouverte{ border-color:var(--gold-deep); }
.partie-tete{
  display:flex; align-items:center; gap:11px;
  width:100%; padding:9px 13px;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-body); font-size:13.5px; color:var(--ink);
}
.partie-tete:hover{ background:var(--screen); }
.partie-tete:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:-2px; }
.partie-nom{ flex:0 0 auto; }
/* L equipe se lit avant d ouvrir : six vignettes se reconnaissent plus vite que
   six noms. Elle prend la place du milieu, et se retire la ou il n y en a pas. */
.partie-equipe-mini{ flex:1 1 auto; display:flex; gap:2px; align-items:center; }
.partie-vignette{ display:block; object-fit:contain; }
/* Le temps de jeu et la periode, sur la ligne repliee comme sur la fiche
   publique. En --font-data et discret : c est un renseignement a cote du nom,
   pas ce qui titre la ligne. Il se retire quand la place manque plutot que de
   pousser la pastille d etat hors du cadre. */
.partie-resume{
  flex:0 1 auto; min-width:0;
  font-family:var(--font-data); font-size:10px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Les trois mesures cote a cote tant que la place le permet, l une sous l autre
   des qu elle manque : trois champs courts ne meritent pas trois lignes sur un
   ecran large, et ne tiennent pas sur un etroit. */
.partie-mesures{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.partie-heures-boite{ display:flex; align-items:center; gap:5px; }
.partie-unite{
  font-family:var(--font-data); font-size:10px; color:var(--ink-faint);
}
.partie-heures, .partie-date{
  padding:6px 9px; border-radius:8px;
  background:var(--screen); border:1px solid var(--card-border);
  color:var(--ink); font-family:var(--font-body); font-size:12.5px;
}
.partie-heures{ width:76px; }
.partie-heures:focus, .partie-date:focus{ outline:none; border-color:var(--gold-deep); }
/* Le calendrier natif sort noir sur noir sans cela : l icone est peinte par le
   navigateur, et n herite pas de la couleur du texte. */
.partie-date::-webkit-calendar-picker-indicator{ filter:invert(.7); cursor:pointer; }
html[data-theme="light"] .partie-date::-webkit-calendar-picker-indicator{ filter:none; }

.partie-etat{
  flex:0 0 auto;
  padding:2px 9px; border-radius:20px;
  font-family:var(--font-data); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--card-border); color:var(--ink-soft);
}
.partie-etat-fini{ background:var(--gold-deep); color:var(--panel); }
.partie-etat-abandon{ opacity:.6; }

.partie-corps{
  display:flex; flex-direction:column; gap:11px;
  padding:12px 13px 13px;
  border-top:1px solid var(--card-border);
}
.partie-corps[hidden]{ display:none; }
.partie-champ{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.partie-champ select{ flex:0 1 200px; }
.partie-champ-nom{
  font-family:var(--font-data); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}
.partie-equipe{ display:flex; flex-direction:column; gap:7px; }
.partie-rangee{ display:flex; flex-wrap:wrap; gap:6px; }
.partie-membre{
  display:flex; align-items:center; gap:6px;
  padding:3px 4px 3px 3px; border-radius:8px;
  border:1px solid var(--card-border); background:var(--screen);
  font-family:var(--font-body); font-size:12px; color:var(--ink);
}
.partie-oter{
  border:0; background:none; cursor:pointer;
  padding:0 4px; line-height:1;
  font-size:15px; color:var(--ink-faint);
}
.partie-oter:hover{ color:var(--dex-red); }
.partie-cherche, .partie-note{
  width:100%; padding:7px 10px; border-radius:8px;
  background:var(--screen); border:1px solid var(--card-border);
  color:var(--ink); font-family:var(--font-body); font-size:12.5px;
}
.partie-note{ resize:vertical; line-height:1.5; }
.partie-cherche:focus, .partie-note:focus{ outline:none; border-color:var(--gold-deep); }
.partie-trouves{ display:flex; flex-wrap:wrap; gap:5px; }
.partie-trouve{
  display:flex; align-items:center; gap:5px;
  padding:3px 8px 3px 3px; border-radius:7px;
  border:1px solid var(--card-border); background:var(--panel);
  color:var(--ink); font-family:var(--font-body); font-size:11.5px; cursor:pointer;
}
.partie-trouve:hover{ border-color:var(--gold-deep); }
/* Retirer un jeu efface une saisie qu on ne peut pas retrouver : le bouton se
   tient a l ecart, en bas, et n emprunte pas la couleur d une action ordinaire. */
.partie-retirer{
  align-self:flex-start;
  border:0; background:none; cursor:pointer; padding:0;
  font-family:var(--font-body); font-size:11.5px; color:var(--ink-faint);
  text-decoration:underline;
}
.partie-retirer:hover{ color:var(--dex-red); }
.av-carte{
  padding:13px 15px;
  background:var(--card); border:1px solid var(--card-border);
  border-left:3px solid transparent; border-radius:11px;
}
.av-carte.courante{ border-left-color:var(--dex-red); }
.av-entete{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.av-titre{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--font-body); font-size:15.5px; font-weight:700; color:var(--ink);
}
.av-etiquette{
  font-family:var(--font-data); font-size:8.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em;
  border-radius:999px; padding:2px 7px; border:1px solid currentColor;
}
.av-etiquette.defaut{ color:var(--gold); }
.av-etiquette.publique{ color:var(--caught); }
.av-etiquette.privee{ color:var(--ink-faint); }
.av-etiquette.ouverte{ color:var(--dex-red); }
.av-chiffres{
  font-family:var(--font-data); font-size:12px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.av-chiffres b{ font-size:15px; color:var(--ink); font-weight:600; }
.av-dates{
  font-family:var(--font-data); font-size:11px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; margin:5px 0 10px;
}
.av-actions{ display:flex; flex-wrap:wrap; gap:6px; }
.av-actions .toggle-btn{ font-size:12px; padding:5px 10px; }
.av-actions .toggle-btn.danger{ color:#d4735c; border-color:#d4735c; }

.profil-creation-page{ margin-top:12px; }

/* ---- Journal des captures ---- */
.journal-entete{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:8px;
}
.journal-quoi{ font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink); }
.journal-total{
  font-family:var(--font-data); font-size:11px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}

.journal{ display:flex; flex-direction:column; }
.journal-jour{
  font-family:var(--font-data); font-size:9.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ink-faint);
  padding:12px 2px 6px; border-bottom:1px solid var(--card-border); margin-bottom:4px;
}
.journal-ligne{
  display:grid; grid-template-columns:22px 1fr auto 52px;
  align-items:center; gap:10px;
  padding:6px 8px; border-radius:7px;
  font-family:var(--font-body); font-size:13.5px;
  /* La ligne est un <button> quand elle est ouvrable : on lui retire son
     apparence de bouton, elle doit rester une ligne de liste. */
  width:100%; text-align:left;
  background:transparent; border:none; color:inherit;
}
/* Une ligne qu'on peut rouvrir se signale — sinon rien ne dit qu'il y a
   quelque chose derrière. Le chevron n'apparaît qu'au survol, pour ne pas
   encombrer six lignes d'affilée. */
.journal-ligne.ouvrable{ position:relative; padding-right:22px; cursor:pointer; }
.journal-ligne.ouvrable::after{
  content:'\203A';
  position:absolute; right:10px;
  color:var(--ink-faint); font-size:16px; line-height:1;
  opacity:0; transition:opacity 120ms;
}
.journal-ligne:hover{ background:var(--card); }
.journal-ligne.ouvrable:hover::after{ opacity:1; }
.journal-ligne.ouvrable:hover .journal-nom{ color:var(--dex-red); }
.journal-ligne.ouvrable:focus-visible{ outline:2.5px solid var(--dex-red); outline-offset:-2px; }
.journal-marque{ text-align:center; color:var(--caught); font-size:11px; }
.journal-ligne.chromatique .journal-marque{ color:var(--gold); }
.journal-nom{ color:var(--ink); font-weight:600; }
.journal-ou{ font-family:var(--font-data); font-size:11px; color:var(--ink-soft); }
.journal-heure{
  font-family:var(--font-data); font-size:11px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; text-align:right;
}

@media (max-width:600px){
  .journal-ligne{ grid-template-columns:20px 1fr auto; }
  .journal-ou{ display:none; }
}

/* ---- Page Profil : mise au propre ----
   La capture montrait un empilement de blocs sans cadre : le champ de création
   flottait, et le journal vide laissait un grand trou. Chaque section prend
   désormais son cadre, comme les cartes d'aventure. */

.profil-creation-page{
  background:var(--card); border:1px solid var(--card-border);
  border-radius:11px; padding:11px 13px; margin-top:10px;
}
.profil-creation-page input{ background:var(--screen); }

.journal-entete{
  background:var(--card); border:1px solid var(--card-border);
  border-radius:11px 11px 0 0; border-bottom:none;
  padding:11px 15px; margin-bottom:0;
}
.journal{
  background:var(--card); border:1px solid var(--card-border);
  border-radius:0 0 11px 11px;
  padding:4px 8px 8px;
  min-height:70px;
}
.journal .state-msg{
  padding:18px 10px; font-size:13px; line-height:1.6;
  color:var(--ink-faint); text-align:center;
}
.journal-jour:first-child{ padding-top:6px; }

/* Le bouton « Afficher plus » du journal ne doit pas coller au cadre. */
#journalPlus{ margin-top:10px; }

/* Le bas de fenêtre n'a plus que sa ligne de crédit : sans les boutons, la
   barre garde une hauteur qui ne se justifie plus. */
.bottom-bar{ padding-top:10px; padding-bottom:10px; }

/* ---- Accueil : l'aventure ouverte ---- */
.accueil-aventure{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; margin:-4px 0 16px;
  padding:10px 15px;
  background:var(--card); border:1px solid var(--card-border);
  border-left:3px solid var(--dex-red); border-radius:11px;
  cursor:pointer; font-family:var(--font-body);
  transition:border-color 120ms, transform 90ms;
}
.accueil-aventure:hover{ transform:translateX(2px); }
.accueil-aventure-nom{
  display:flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink);
}
.accueil-aventure-nom em{
  font-style:normal; font-family:var(--font-data); font-size:8.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink-faint);
  border:1px solid var(--card-border); border-radius:999px; padding:2px 7px;
}
.accueil-aventure-info{
  font-family:var(--font-data); font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---- Accueil : ce qui est à portée ---- */
.a-portee{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:11px;
}
.portee-carte{
  display:flex; flex-direction:column; gap:7px;
  padding:12px 14px; text-align:left;
  background:var(--card); border:1px solid var(--card-border);
  border-radius:11px; cursor:pointer; font-family:var(--font-body);
  transition:border-color 120ms, transform 90ms;
}
.portee-carte:hover{ border-color:var(--dex-red); transform:translateY(-2px); }
.portee-haut{ display:flex; flex-direction:column; gap:3px; }
.portee-nom{ font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.portee-reste{
  font-family:var(--font-data); font-size:11.5px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.portee-reste b{ color:var(--gold); font-size:14px; font-weight:600; }
.portee-barre{
  display:block; height:5px; border-radius:4px;
  background:var(--screen); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--card-border);
}
.portee-barre i{ display:block; height:100%; border-radius:4px; background:var(--caught); }
.portee-bas{
  font-family:var(--font-data); font-size:10.5px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}

/* ---- La barre des outils ----
   Stratégie, Reproduction et Transferts partagent un onglet de nav. La
   sous-barre est recopiee en tete des trois sections : chacune doit pouvoir
   s'afficher seule, et une barre unique posee ailleurs aurait demande de
   deplacer les trois pages sous un meme parent. */
.outils-nav{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:14px; padding-bottom:12px;
  border-bottom:1px solid var(--card-border);
}
.outils-onglet{
  padding:7px 14px; cursor:pointer;
  border:1px solid var(--card-border); border-radius:999px;
  background:var(--card); color:var(--ink-soft);
  font-family:var(--font-body); font-size:13px; font-weight:600;
}
.outils-onglet:hover{ border-color:var(--ink-faint); color:var(--ink); }
.outils-onglet.active{
  background:var(--dex-red); border-color:var(--dex-red); color:#fff;
}
.outils-onglet:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }

.transferts-resume{
  margin:0 0 14px;
  font-family:var(--font-data); font-size:11.5px; line-height:1.6;
  color:var(--ink-soft);
}
.transferts-resume b{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---- Accueil : les objectifs sur mesure ----
   Une carte par objectif, avec sa jauge. La croix se detache du bloc
   cliquable : on ne supprime pas par megarde ce qu'on voulait ouvrir. */
.objectifs{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:10px;
}
.objectif-carte{
  display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:6px;
  align-items:start;
  padding:11px 12px 12px;
  background:var(--card); border:1px solid var(--card-border);
  border-left:3px solid var(--gold); border-radius:11px;
}
.objectif-carte.fini{ border-left-color:var(--caught); }
.objectif-ouvrir{
  display:flex; flex-direction:column; gap:6px; min-width:0;
  padding:0; border:none; background:none; cursor:pointer; text-align:left;
  font-family:var(--font-body);
}
.objectif-haut{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.objectif-nom{
  font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.objectif-chiffre{
  font-family:var(--font-data); font-size:12px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; flex:none;
}
.objectif-barre{
  display:block; height:5px; border-radius:4px;
  background:var(--screen); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--card-border);
}
.objectif-barre i{ display:block; height:100%; border-radius:4px; background:var(--gold); }
.objectif-carte.fini .objectif-barre i{ background:var(--caught); }
.objectif-bas{
  font-family:var(--font-data); font-size:10px; color:var(--ink-faint);
  line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.objectif-ouvrir:hover .objectif-nom{ color:var(--dex-red); }
.objectif-ouvrir:focus-visible{ outline:2px solid var(--dex-red); outline-offset:3px; border-radius:6px; }
.objectif-oter{
  width:24px; height:24px; padding:0; line-height:1; cursor:pointer;
  border:1px solid var(--card-border); border-radius:7px;
  background:transparent; color:var(--ink-faint);
}
.objectif-oter:hover{ border-color:var(--danger); color:var(--danger); }
.objectif-oter:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }

/* ---- Accueil : le programme du soir ----
   Une ligne par cible : le sprite, le nom, l'endroit, et le bouton qui coche.
   La carte se lit en diagonale — on l'ouvre la console dans l'autre main. */
.programme-quoi{
  margin:0 0 9px;
  font-family:var(--font-data); font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.programme-quoi:empty{ display:none; }
.programme{ display:flex; flex-direction:column; gap:8px; }
.prog-carte{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 13px;
  background:var(--card); border:1px solid var(--card-border);
  border-left:3px solid var(--caught); border-radius:11px;
}
.prog-sprite{
  width:46px; height:46px; flex-shrink:0; display:grid; place-items:center;
  background:var(--screen); border-radius:9px;
}
.prog-sprite img{ max-width:100%; max-height:100%; }
.prog-corps{ flex:1; min-width:170px; display:flex; flex-direction:column; gap:3px; }
.prog-nom{
  align-self:flex-start; padding:0; border:none; background:none; cursor:pointer;
  font-family:var(--font-body); font-size:14px; font-weight:700;
  letter-spacing:-.01em; color:var(--ink); text-align:left;
}
.prog-nom:hover{ color:var(--dex-red); }
.prog-nom:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; border-radius:4px; }
.prog-ou{
  font-family:var(--font-data); font-size:10.5px; color:var(--ink-soft);
  line-height:1.45;
}
.prog-puces{ display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.prog-puce{
  font-family:var(--font-data); font-size:9px; letter-spacing:.04em;
  border:1px solid var(--card-border); border-radius:999px;
  padding:2px 7px; color:var(--ink-faint); background:var(--screen);
}
.prog-pris{ flex-shrink:0; font-size:12px; padding:6px 12px; white-space:nowrap; }

@media (max-width:560px){
  .prog-pris{ width:100%; }
}

/* ---- Accueil : les dernières captures ---- */
.accueil-journal{ min-height:0; padding:6px 8px; }
.journal-tout{
  width:100%; margin-top:6px; padding:7px;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-data); font-size:11px; color:var(--ink-soft);
  border-top:1px solid var(--card-border);
}
.journal-tout:hover{ color:var(--dex-red); }

/* ---- Chez un autre dresseur : ses Pokédex ---- */
.visite-ouvrir{
  flex:1; min-width:0; text-align:left;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--font-body); color:var(--ink);
}
.visite-ouvrir:hover .visite-nom{ color:var(--dex-red); }
.visite-fleche{ font-size:19px; color:var(--card-border); flex-shrink:0; }
.visite-profil:hover .visite-fleche{ color:var(--dex-red); }

.visite-entete{ flex-wrap:wrap; }
.visite-entete .toggle-btn{ flex-shrink:0; }
.visite-entete > div{ flex:1; min-width:140px; }

/* Ses cartes ne se cliquent pas : on regarde, on ne coche pas. Le curseur et
   l'absence d'effet au survol le disent sans avoir à l'écrire. */
.jeu-carte.visite-jeu{ cursor:default; }
.jeu-carte.visite-jeu:hover{ border-color:var(--card-border); transform:none; }
/* Un jeu où il n'a rien : présent, mais en retrait — sinon vingt cartes vides
   noieraient les trois qui comptent. */
.jeu-carte.visite-jeu.vide{ opacity:.42; }

/* ---- Chasse aux chromatiques ---- */
.chasse-depart{ display:flex; gap:9px; margin-bottom:14px; flex-wrap:wrap; }
.chasse-champ{ position:relative; flex:1; min-width:220px; }
.chasse-champ input{
  width:100%; padding:10px 13px; border-radius:10px;
  background:var(--card); border:1px solid var(--card-border);
  color:var(--ink); font-family:var(--font-body); font-size:14px;
}
.chasse-champ input:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.chasse-suggestions{
  position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:40;
  background:var(--card); border:1px solid var(--card-border);
  border-radius:10px; padding:5px; overflow:hidden;
  box-shadow:0 18px 34px -14px rgba(0,0,0,.5);
}
.chasse-suggestion{
  display:block; width:100%; text-align:left;
  padding:8px 11px; border:none; border-radius:7px; background:none;
  cursor:pointer; font-family:var(--font-body); font-size:13.5px; color:var(--ink);
}
.chasse-suggestion:hover{ background:var(--screen); color:var(--gold); }
#chasseMethode{
  padding:10px 13px; border-radius:10px;
  background:var(--card); border:1px solid var(--card-border);
  color:var(--ink); font-family:var(--font-body); font-size:13px;
}
.chasse-resume{
  font-family:var(--font-data); font-size:11.5px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; margin-bottom:10px;
}

.chasse-liste{ display:flex; flex-direction:column; gap:11px; }
.chasse-carte{
  display:flex; align-items:center; gap:15px; flex-wrap:wrap;
  padding:13px 16px;
  background:var(--card); border:1px solid var(--card-border);
  border-left:3px solid var(--gold); border-radius:11px;
}
.chasse-sprite{
  width:74px; height:74px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--screen); border-radius:10px;
}
.chasse-sprite img{ max-width:100%; max-height:100%; }

.chasse-infos{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:4px; }
.chasse-nom{
  font-family:var(--font-body); font-size:16px; font-weight:700;
  letter-spacing:-.01em; color:var(--ink);
}
.chasse-meta{
  font-family:var(--font-data); font-size:10.5px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.chasse-barre{
  height:5px; border-radius:4px; background:var(--screen); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--card-border); margin-top:3px;
}
.chasse-barre i{
  display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--gold), #f6d98a);
}
.chasse-chance{
  font-family:var(--font-data); font-size:10.5px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

.chasse-compteur{ display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.chasse-valeur{
  font-family:var(--font-data); font-size:30px; font-weight:600;
  color:var(--gold); line-height:1; font-variant-numeric:tabular-nums;
  min-width:82px; text-align:center;
}
.chasse-boutons{ display:flex; gap:5px; }
.chasse-bouton{
  min-width:42px; padding:6px 9px; border-radius:7px; cursor:pointer;
  background:var(--screen); border:1px solid var(--card-border);
  color:var(--ink); font-family:var(--font-data); font-size:12.5px;
}
.chasse-bouton:hover{ border-color:var(--gold); color:var(--gold); }
.chasse-bouton.principal{
  background:var(--gold); border-color:var(--gold); color:#231d05; font-weight:700;
}
.chasse-bouton.principal:hover{ filter:brightness(1.08); color:#231d05; }

.chasse-actions{ display:flex; flex-direction:column; gap:5px; flex-shrink:0; }
.chasse-actions .toggle-btn{ font-size:12px; padding:6px 11px; white-space:nowrap; }

/* La chasse que le clavier vise. Elle ne se distingue que s'il y a un choix a
   faire : avec une seule chasse ouverte, aucune carte ne porte ce liseré. */
.chasse-carte.visee{
  border-color:var(--gold); box-shadow:0 0 0 1px var(--gold);
}
.chasse-carte{ cursor:default; }
.chasse-liste .chasse-carte:hover{ border-color:var(--card-border); }
.chasse-liste .chasse-carte.visee:hover{ border-color:var(--gold); }

/* Les raccourcis. Une ligne de rappel, pas un mode d'emploi : elle nomme la
   chasse visée, ce qui est la seule chose qu'on ne devine pas. */
.chasse-clavier{
  margin:0 0 12px; padding:8px 12px;
  border:1px dashed var(--card-border); border-radius:10px;
  font-family:var(--font-data); font-size:10.5px; line-height:1.6;
  color:var(--ink-faint); background:transparent;
}
.chasse-clavier b{
  color:var(--ink); font-weight:600;
  background:var(--screen); border:1px solid var(--card-border);
  border-radius:5px; padding:1px 5px;
}
.chasse-clavier i{ font-style:normal; color:var(--ink-faint); opacity:.75; }

/* ---- Le tableau de chasse ----
   Ce que les chasses abouties racontent. Les chiffres d'abord, la liste
   ensuite : on vient y chercher un total avant un détail. */
.chasse-tableau{ display:flex; flex-direction:column; gap:12px; }
.tableau-chiffres{
  display:grid; gap:9px;
  grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
}
.tableau-chiffre{
  display:flex; flex-direction:column; gap:3px;
  padding:12px 14px; border-radius:11px;
  background:var(--card); border:1px solid var(--card-border);
}
.tableau-chiffre b{
  font-family:var(--font-data); font-size:22px; font-weight:600; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.tableau-chiffre span{
  font-family:var(--font-data); font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-faint);
}
.tableau-chiffre.chanceux b{ color:var(--caught); }
.tableau-chiffre.malchanceux b{ color:var(--gold); }

.tableau-liste{ display:flex; flex-direction:column; gap:6px; }
.tableau-ligne{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:8px 12px; border-radius:10px;
  background:var(--card); border:1px solid var(--card-border);
}
.tableau-sprite{
  width:34px; height:34px; flex-shrink:0; display:grid; place-items:center;
  background:var(--screen); border-radius:7px;
}
.tableau-sprite img{ max-width:100%; max-height:100%; }
.tableau-nom{ font-size:13px; font-weight:600; color:var(--ink); }
.tableau-meta{
  flex:1; min-width:150px;
  font-family:var(--font-data); font-size:10px; color:var(--ink-faint);
}
.tableau-compteur{
  font-family:var(--font-data); font-size:15px; font-weight:600;
  color:var(--gold); font-variant-numeric:tabular-nums;
}
.tableau-reste{
  margin:0; font-family:var(--font-data); font-size:10px; color:var(--ink-faint);
}

@media (max-width:640px){
  .chasse-carte{ gap:11px; }
  .chasse-actions{ flex-direction:row; width:100%; }
}

/* ---- Modale de création d'une chasse ---- */
.chasse-label{
  display:block; margin:12px 0 5px;
  font-family:var(--font-data); font-size:8.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink-faint);
}
#chasseJeu, #chasseMethode{
  width:100%; padding:9px 12px; border-radius:10px;
  background:var(--screen); border:1px solid var(--card-border);
  color:var(--ink); font-family:var(--font-body); font-size:13.5px;
}

/* Les deux menus passent par enhanceSelect, comme les filtres du Pokédex.
   Dans la barre d'outils, .select-wrap se partage une ligne (flex:1 1 0) ;
   ici il occupe la sienne, d'où ce recadrage. */
.modal-card .select-wrap{ display:block; width:100%; }
.modal-card .select-btn{ border-radius:10px; }
/* La liste s'ouvre par-dessus le reste de la modale, boutons compris. */
.modal-card .select-list{ z-index:60; }

/* ---- Bonus cumulables ---- */
/* Une case par bonus, avec ce qu'il rapporte : c'est le gain en tirages qui
   explique pourquoi trois cases cochées font passer de 1/4096 à 1/128. */
.chasse-bonus{ display:flex; flex-direction:column; gap:6px; }
.chasse-bonus-case{
  display:flex; align-items:center; gap:9px;
  padding:8px 11px; border-radius:10px; cursor:pointer;
  background:var(--screen); border:1px solid var(--card-border);
  font-family:var(--font-body); font-size:13px; color:var(--ink);
  transition:border-color 120ms;
}
.chasse-bonus-case:hover{ border-color:var(--gold); }
.chasse-bonus-case input{ accent-color:var(--gold); width:15px; height:15px; flex-shrink:0; }
.chasse-bonus-case:has(input:checked){ border-color:var(--gold); background:var(--card); }
.chasse-bonus-nom{ flex:1; }
.chasse-bonus-gain{
  font-family:var(--font-data); font-size:10.5px; color:var(--gold);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* Le taux, recalculé à chaque case cochée : c'est la réponse à « est-ce que ça
   vaut le coup ». */
.chasse-taux{
  margin:12px 0 0; padding:9px 12px; border-radius:10px;
  background:var(--card); border:1px solid var(--card-border);
  font-family:var(--font-data); font-size:12px; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.chasse-taux:empty{ display:none; }
.chasse-choisi{
  display:flex; align-items:center; gap:11px; margin-top:8px;
  padding:8px 11px; border-radius:10px;
  background:var(--screen); border:1px solid var(--gold);
}
.chasse-choisi img{ width:38px; height:38px; object-fit:contain; }
.chasse-choisi span{ flex:1; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink); }
.chasse-changer{
  background:none; border:none; cursor:pointer;
  font-family:var(--font-data); font-size:11px; color:var(--ink-soft);
  text-decoration:underline;
}
.chasse-changer:hover{ color:var(--gold); }
.chasse-depart{ margin-bottom:14px; }

@media (max-width:560px){
}

/* ---- Les blocs personnels de la page Profil ---- */
/* Données, connexions, administration. Même caisse que les autres cartes de
   l'application : le fond des cartes, le filet, l'arrondi des blocs. */
.profil-bloc{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:11px;
  padding:16px 18px;
  margin-bottom:14px;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
/* Une ligne « nom du reglage : menu ». Le bloc qui la contient est deja une
   colonne alignee a gauche ; celle-ci se remet en rangee, et s enroule sur un
   ecran etroit plutot que de pousser le menu hors du cadre. */
.profil-champ{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  cursor:pointer;
}
.profil-champ-nom{
  font-size:12.5px; font-weight:600; color:var(--ink);
}
/* Assez large pour que « Desactivee » ne soit pas coupe, et pas plus : un menu
   a deux choix n a pas besoin de toute la largeur du bloc. */
.profil-champ .select-wrap{ min-width:160px; }

.profil-bloc-note{
  margin:0; max-width:64ch;
  font-size:13.5px; line-height:1.5; color:var(--ink-soft);
}
.profil-bloc-etat{
  font-family:var(--font-data); font-size:11.5px; color:var(--ink-faint);
}

/* La bascule du journal. Discrète : elle vit dans un en-tête, pas dans une
   barre d'actions, et ne doit pas peser plus que le nom de l'aventure. */
.journal-portee{
  margin-left:10px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--card-border);
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--font-data);
  font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer;
  transition:border-color 120ms, color 120ms;
}
.journal-portee:hover{ border-color:var(--ink-faint); color:var(--ink); }
.journal-portee[aria-pressed="true"]{ border-color:var(--gold); color:var(--gold-deep); }
.journal-portee:focus-visible{ outline:2.5px solid var(--gold); outline-offset:2px; }

/* L'aventure d'où vient une capture, en mode transversal. En retrait du nom du
   jeu : c'est un contexte, pas le lieu de la capture. */
.journal-aventure{
  font-family:var(--font-data); font-size:10.5px;
  color:var(--ink-faint);
  padding:1px 7px;
  border:1px solid var(--card-border);
  border-radius:999px;
  white-space:nowrap;
}
/* La ligne compte quatre colonnes fixes. L'aventure en ajoute une cinquieme :
   sans cette regle, elle passerait a la ligne suivante et casserait la liste. */
.journal-ligne.avec-aventure{ grid-template-columns:22px 1fr auto auto 52px; }
@media (max-width:600px){
  /* Sur etroit, le jeu disparait deja ; l'aventure le suit, sinon la ligne
     n'a plus de place pour le nom du Pokemon, qui est l'essentiel. */
  .journal-ligne.avec-aventure{ grid-template-columns:20px 1fr auto; }
  .journal-aventure{ display:none; }
}

/* ---- Les connexions ouvertes ---- */
.sessions{ display:flex; flex-direction:column; gap:8px; width:100%; }
.session{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 12px;
  border:1px solid var(--card-border);
  border-radius:10px;
  font-size:13.5px;
}
/* Celle d'où l'on parle : elle se distingue, sinon on ferme la sienne en
   croyant fermer celle d'un autre. */
.session.courante{ border-color:var(--caught); background:var(--caught-soft); }
.session-quand{ color:var(--ink); }
.session-jusque{ color:var(--ink-faint); font-family:var(--font-data); font-size:11.5px; }
.session-ici{
  margin-left:auto;
  font-family:var(--font-data); font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--caught);
}
.session-fermer{
  margin-left:auto;
  padding:4px 11px;
  border-radius:999px;
  border:1px solid var(--card-border);
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  cursor:pointer;
  transition:border-color 120ms, color 120ms;
}
.session-fermer:hover{ border-color:var(--danger); color:var(--danger); }
.session-fermer:focus-visible{ outline:2.5px solid var(--danger); outline-offset:2px; }

/* ---- Administration ---- */
.admin-champs{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.admin-champs input{
  padding:8px 12px;
  min-width:180px;
  border-radius:10px;
  border:1px solid var(--card-border);
  background:var(--screen);
  color:var(--ink);
  font-family:var(--font-body); font-size:13.5px;
}
.admin-champs input:focus{ outline:2px solid var(--gold); outline-offset:1px; }


/* ---- Apparence : les cinq couleurs -----------------------------------
   Une ligne par couleur, au rayon 10 px des cartes interieures. Les
   pastilles prennent le 7 px des petites commandes, et la valeur en
   hexadecimal passe en --font-data avec tabular-nums : elle change sous
   les yeux quand on tire la palette, et sans chasse fixe la ligne danse. */
.apparence{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.apparence-ligne{
  border:1px solid var(--card-border); border-radius:10px;
  background:var(--screen);
  padding:11px 13px 12px;
}
.apparence-tete{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.apparence-nom{ font-size:13px; font-weight:600; color:var(--ink); }
.apparence-valeur{
  font-family:var(--font-data); font-size:10px; font-variant-numeric:tabular-nums;
  color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em;
}
.apparence-note{ margin:3px 0 9px; font-size:11.5px; color:var(--ink-soft); }
.apparence-pastilles{ display:flex; flex-wrap:wrap; gap:7px; }

.pastille{
  width:26px; height:26px; padding:0; flex:none;
  border:1px solid var(--card-border); border-radius:7px;
  cursor:pointer; position:relative;
}
.pastille:hover{ transform:translateY(-1px); }
.pastille.choisie{ border-color:var(--dex-red); border-width:1.5px; }
.pastille.choisie::after{
  content:''; position:absolute; inset:-4px;
  border:1px solid var(--dex-red); border-radius:10px;
}
.pastille:focus-visible,
.pastille:focus-within{ outline:2px solid var(--dex-red); outline-offset:2px; }

/* Le choix libre. La roue en fond dit ce que le bouton fait sans un mot ;
   l'input natif vit dessous, invisible mais bien present — c'est lui qui
   ouvre la palette du systeme, avec sa pipette et ses couleurs recentes. */
.pastille.libre{
  display:block; overflow:hidden;
  background:conic-gradient(#ee3a3a, #f2a900, #2f9e63, #3a7aee, #8e4ad6, #ee3a3a);
}
.pastille.libre input{
  width:100%; height:100%; opacity:0; border:0; padding:0;
  cursor:pointer; display:block;
}

.apparence-alerte{
  margin:2px 0 0; font-size:11.5px; color:var(--danger);
}
@media (prefers-reduced-motion:reduce){
  .pastille:hover{ transform:none; }
}

/* ---- Les amis --------------------------------------------------------
   Deux listes : qui l'on suit, et ce qu'ils attrapent. Rayons du modele —
   10 px pour une ligne, 11 px pour un bloc, 7 px pour une commande. */
.amis-ajout{ display:flex; gap:8px; margin-bottom:6px; }
.amis-ajout input{
  flex:1; min-width:0; height:36px; padding:0 12px;
  border:1px solid var(--card-border); border-radius:10px;
  background:var(--card); color:var(--ink);
  font-family:var(--font-body); font-size:13px;
}
.amis-ajout input:focus{ outline:none; border-color:var(--dex-red); }

.amis{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.ami{
  /* minmax(0,1fr) et non 1fr : une colonne de grille refuse par defaut de
     descendre sous la taille de son contenu, et un pseudo long l elargirait
     jusqu a pousser les chiffres dehors au lieu d etre coupe. */
  display:grid; grid-template-columns:26px minmax(0, 1fr) auto 26px 26px;
  align-items:center; gap:10px;
  padding:9px 12px;
  border:1px solid var(--card-border); border-radius:10px;
  background:var(--card);
}
.ami-avatar, .fil-avatar{
  width:26px; height:26px; border-radius:50%; object-fit:cover;
  background:var(--screen);
}
/* Un pseudo trop long chasse les chiffres hors de la ligne. Douze caracteres
   est desormais la regle, mais ceux d avant peuvent en compter vingt : la
   colonne se retrecit et coupe proprement plutot que de tout pousser. */
.ami-nom{
  font-size:13px; color:var(--ink);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ami-nom strong{ font-weight:600; }
.ami-aventure{ color:var(--ink-faint); font-weight:400; }
.ami-chiffres{
  font-family:var(--font-data); font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--ink-soft); white-space:pre;
}
.ami-retirer{
  width:26px; height:26px; padding:0; line-height:1;
  border:1px solid var(--card-border); border-radius:7px;
  background:transparent; color:var(--ink-faint); cursor:pointer;
}
/* L'entraide, a cote du retrait : deux boutons de meme taille, l'un qui
   ouvre et l'autre qui ferme. Le premier se colore au survol, le second non —
   on ne met pas en avant ce qu'on n'encourage pas. */
.ami-entraide{
  display:grid; place-items:center;
  width:28px; height:28px; padding:0;
  border:1px solid var(--card-border); border-radius:8px;
  background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:color 120ms, border-color 120ms;
}
.ami-entraide:hover{ color:var(--ink); }
.ami-entraide:hover{ border-color:var(--caught); }
.ami-entraide:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }
.ami-retirer:hover{ color:#fff; background:var(--danger); border-color:var(--danger); }
.ami-retirer:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }

.fil{ display:flex; flex-direction:column; gap:6px; }
.fil-ligne{
  display:grid; grid-template-columns:26px minmax(0, 1fr) auto;
  align-items:center; gap:10px;
  padding:8px 12px;
  border:1px solid var(--card-border); border-radius:10px;
  background:var(--card);
  font-size:12.5px; color:var(--ink-soft);
}
.fil-texte{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fil-ligne strong{ color:var(--ink); font-weight:600; }
/* Un chromatique est l'evenement rare de ce journal : il se voit. */
.fil-ligne.chromatique{ border-color:var(--gold); }
.fil-ligne.chromatique strong{ color:var(--gold); }
.fil-quand{
  font-family:var(--font-data); font-size:10px; color:var(--ink-faint);
  white-space:nowrap;
}

/* La pastille de l'onglet. Le compte est dans un attribut : pas de noeud de
   plus a tenir a jour, et il disparait avec la classe. */
/* LA PASTILLE NE DOIT PAS COUVRIR LE LIBELLE. Elle se posait par-dessus, et
   l'onglet se lisait « Am12 » au lieu d'« Amis ». On lui reserve sa place a
   droite plutot que de la superposer — c'est la seule facon que les deux
   restent lisibles quel que soit le nombre.

   Le retrait vaut pour l'onglet qui PORTE une pastille, pas pour tous : sinon
   les onze autres se decaleraient pour rien. */
.page-tab.a-du-neuf{ position:relative; padding-right:32px; }
.page-tab.a-du-neuf::after{
  content:attr(data-combien);
  /* 18 px et non 15, police 10 et non 8,5. Le chiffre etait a l'etroit : la
     pastille touchait le bord arrondi de l'onglet, et un « 12 » y paraissait
     coupe. L'onglet fait une trentaine de pixels de haut, elle y tient
     largement — c'est la police qui manquait de place, pas la place. */
  /* Centree en hauteur, calee a droite dans le retrait qu'on vient d'ouvrir. */
  position:absolute; top:50%; right:7px; transform:translateY(-50%);
  min-width:18px; height:18px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:var(--dex-red); color:#fff;
  font-family:var(--font-data); font-size:10px; line-height:1;
  font-variant-numeric:tabular-nums;
}

/* ---- La bascule ------------------------------------------------------
   La case a cocher du systeme ne prend pas le theme : elle reste carree et
   bleue au milieu d une interface qui n a aucune autre couleur d origine,
   et rien n y dit qu il s agit d un interrupteur plutot que d une option
   dans une liste. Un rail et un pouce le disent d un coup d oeil.

   La vraie case reste dans le HTML, seulement rendue invisible : c est elle
   qui porte l etat, le clavier et le libelle. On ne dessine que par-dessus. */
.bascule{
  display:flex; align-items:center; gap:11px;
  cursor:pointer; margin-bottom:6px;
}
.bascule input{
  position:absolute; opacity:0; width:0; height:0;
}
.bascule-piste{
  position:relative; flex:none;
  width:38px; height:22px; border-radius:999px;
  background:var(--screen);
  border:1px solid var(--card-border);
  transition:background .16s ease, border-color .16s ease;
}
.bascule-pouce{
  position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%;
  background:var(--ink-faint);
  transition:transform .16s ease, background .16s ease;
}
.bascule input:checked + .bascule-piste{
  background:var(--dex-red); border-color:var(--dex-red);
}
.bascule input:checked + .bascule-piste .bascule-pouce{
  transform:translateX(16px); background:#fff;
}
.bascule input:focus-visible + .bascule-piste{
  outline:2px solid var(--dex-red); outline-offset:2px;
}
.bascule input:disabled + .bascule-piste{ opacity:.5; }
.bascule input:disabled ~ .bascule-texte{ opacity:.5; }
.bascule-texte{ font-size:13px; color:var(--ink); }
@media (prefers-reduced-motion:reduce){
  .bascule-piste, .bascule-pouce{ transition:none; }
}

/* ---- La retrospective ------------------------------------------------
   Quatre chiffres, puis trente traits pour le dernier mois. Les chiffres
   passent en --font-data avec tabular-nums : ils changent d une session a
   l autre, et sans chasse fixe la rangee danse. */
.retro{ margin-bottom:14px; }
.retro-chiffres{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
  gap:8px; margin-bottom:12px;
}
.retro-carte{
  display:flex; flex-direction:column; gap:1px;
  padding:11px 13px;
  border:1px solid var(--card-border); border-radius:10px;
  background:var(--card);
}
.retro-valeur{
  font-family:var(--font-data); font-size:22px; font-weight:600; line-height:1.1;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.retro-quoi{ font-size:12px; color:var(--ink-soft); }
.retro-detail{
  font-family:var(--font-data); font-size:9px; color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Les traits du dernier mois. align-items:flex-end pour qu ils poussent du
   bas, comme un histogramme se lit. */
.retro-barres{
  display:flex; align-items:flex-end; gap:3px;
  height:56px; padding:8px 11px;
  border:1px solid var(--card-border); border-radius:10px;
  background:var(--screen);
}
.retro-barre{
  flex:1; min-width:0; border-radius:2px 2px 0 0;
  background:var(--dex-red);
}
/* Un jour sans capture garde son trait, a deux pixels : sans lui, trente
   traits serres donneraient l illusion d une regularite qui n existe pas. */
.retro-barre.vide{ background:var(--card-border); }
/* Un jour ou un chromatique est tombe se distingue : c est l evenement rare
   de ce journal, et le noyer dans la masse serait le gacher. */
.retro-barre.chromatique{ background:var(--gold); }

.retro-pied{
  margin:8px 0 0; font-size:11.5px; color:var(--ink-faint);
}

/* ---- Le carnet de bord d une aventure ---------------------------------
   Un <details> : replie quand il est vide, ouvert quand il est ecrit. Le
   navigateur fournit le pliage, le clavier et l etat — rien a reecrire. */
.av-carnet{
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--card-border);
}
.av-carnet summary{
  cursor:pointer; list-style:none;
  font-family:var(--font-data); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint);
}
.av-carnet summary::-webkit-details-marker{ display:none; }
.av-carnet summary:hover{ color:var(--ink-soft); }
.av-carnet summary:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }
.av-carnet-champ{
  display:block; width:100%; margin-top:8px; padding:9px 11px;
  border:1px solid var(--card-border); border-radius:10px;
  background:var(--screen); color:var(--ink);
  font-family:var(--font-body); font-size:12.5px; line-height:1.5;
  resize:vertical; min-height:70px;
}
.av-carnet-champ:focus{ outline:none; border-color:var(--dex-red); }
.av-carnet-etat{
  display:block; margin-top:4px;
  font-family:var(--font-data); font-size:9px; color:var(--ink-faint);
}

/* ---- La bascule a deux cotes ------------------------------------------
   Le meme rail, mais avec un mot de chaque cote plutot qu un seul apres :
   « Regional | National ». Ce n est plus oui/non, c est l un OU l autre, et
   les deux meritent d etre nommes.

   Le cote actif s eclaire par :has() sur le label — aucune regle CSS ne
   remonte d un input vers le span qui le precede, et poser une classe en JS
   ferait tenir en deux endroits ce que le navigateur sait deja. */
/* Tout a droite de sa rangee. margin-left:auto pousse la bascule au bout
   sans avoir a toucher aux voisins : c est le seul reglage qui tienne quand
   la rangee change de contenu — et elle change, plusieurs de ses boutons
   n apparaissent que sur certains jeux.

   Elle n est pas une commande comme les autres : les autres modifient ce
   qu on voit d une meme liste, celle-ci change de liste. La mettre a part
   le dit sans un mot. */
.bascule-cotes{ margin-bottom:0; margin-left:auto; gap:9px; }
.bascule-cotes .bascule-cote{
  font-family:var(--font-body); font-size:12px; font-weight:600;
  color:var(--ink-faint); white-space:nowrap;
  transition:color .16s ease;
}
.bascule-cotes:has(input:not(:checked)) .bascule-cote:first-child,
.bascule-cotes:has(input:checked) .bascule-cote:last-child{
  color:var(--ink);
}
/* Le rail garde sa teinte des deux cotes : ici aucune des deux positions n est
   « allumee » plus que l autre — l une n est pas un reglage actif, juste
   l autre choix. */
.bascule-cotes input:checked + .bascule-piste{
  background:var(--screen); border-color:var(--card-border);
}
.bascule-cotes input:checked + .bascule-piste .bascule-pouce{
  background:var(--dex-red);
}
.bascule-cotes input:not(:checked) + .bascule-piste .bascule-pouce{
  background:var(--dex-red);
}
.bascule-cotes[hidden]{ display:none; }
@media (prefers-reduced-motion:reduce){
  .bascule-cotes .bascule-cote{ transition:none; }
}

/* ---- Les succes -------------------------------------------------------
   Une grille de cartes, groupees par famille. L acquis se distingue par
   l etoile pleine et par sa bordure ; le reste porte une barre de
   progression, que l acquis n a justement plus — une barre pleine
   n apprend rien. */
/* Dans la pop-up, la liste defile dans sa carte plutot que d etirer la page
   derriere : vingt-trois Pokedex plus vingt-deux autres succes font une
   longue colonne. */
.succes-card{ max-width:640px; width:min(640px, 94vw); }
.succes-card .succes-bloc{
  max-height:62vh; overflow-y:auto;
  text-align:left; margin-bottom:0;
  /* Assez de marge pour que le pouce ne chevauche pas les cartes, et que
     l ascenseur ne colle pas au bord arrondi de la modale. */
  padding-right:12px;
  /* L'ascenseur lui-même est décrit une seule fois, en fin de base.css : la
     mesure de contraste et la raison d'écarter scrollbar-width y sont, et
     elles valaient déjà pour les six copies qui vivaient ici et ailleurs. */
}
.succes-bloc{ margin-bottom:14px; }
.succes-compte{
  margin:0 0 10px;
  font-family:var(--font-data); font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.succes-groupe{
  font-family:var(--font-data); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
  margin:12px 0 6px;
}
.succes-grille{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(228px, 1fr));
  gap:7px;
}
/* .succes-carte, et surtout PAS .succes : « succes » est deja un modificateur
   de genre pose sur .modal-eyebrow et .confirm-note par prevenir(). Une regle
   sur .succes nu les attrapait toutes les deux et leur imposait cette grille —
   le texte tombait dans la colonne de 20px et se brisait un mot par ligne. */
.succes-carte{
  display:grid; grid-template-columns:20px 1fr; gap:9px; align-items:start;
  padding:10px 12px;
  border:1px solid var(--card-border); border-radius:10px;
  background:var(--card);
}
/* Un succes non acquis n est pas grise au point de disparaitre : c est ce qui
   reste a faire, et donc ce qu on vient lire. */
.succes-carte:not(.acquis){ opacity:.72; }
.succes-carte.acquis{ border-color:var(--gold); }
.succes-marque{
  display:flex; align-items:center; justify-content:center;
  height:17px; color:var(--ink-faint);
}
.succes-carte.acquis .succes-marque{ color:var(--gold); }
.succes-corps{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.succes-nom{
  font-size:12.5px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.succes-quoi{ font-size:11px; color:var(--ink-soft); }
.succes-pied{
  font-family:var(--font-data); font-size:9px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; margin-top:2px;
}
.succes-carte.acquis .succes-pied{ color:var(--gold); }
.succes-barre{
  display:block; height:3px; margin-top:5px;
  background:var(--screen); border-radius:999px; overflow:hidden;
}
.succes-barre i{
  display:block; height:100%; background:var(--dex-red); border-radius:999px;
}

/* ---- Les commandes qui ont rejoint le menu du compte ----------------------
   Lexique, nouveautés, mise à jour et thème étaient quatre pastilles rondes
   alignées dans l'en-tête. Rondes, elles ne portaient qu'une icône : il fallait
   les survoler une par une pour savoir laquelle faisait quoi, et elles
   occupaient la barre en permanence pour des choses qu'on ouvre rarement.

   Deux d'entre elles portent un ÉTAT, et c'est tout l'objet de ce bloc : une
   mise à jour disponible, une version non lue. Dans un cercle, l'état tenait
   dans la couleur du cercle ; dans une liste de mots, il lui faut une place. */

.compte-item-nom{ display:block; }

/* Une mise à jour attend. L'or, ici comme dans l'ancienne pilule : c'est la
   seule ligne du menu qui demande une décision plutôt qu'une visite. */
.compte-item.trouvee{ color:var(--gold-deep); font-weight:700; }
.compte-item.trouvee:hover{ background:rgba(217,154,18,.12); }

/* Pendant la vérification. Le cercle tournait ; une ligne de texte ne tourne
   pas — elle pâlit, ce qui dit la même chose sans faire valser le menu. */
.compte-item.cherche{ opacity:.55; }
.compte-item:disabled{ cursor:default; }

/* Du neuf dans les nouveautés : une pastille en fin de ligne. Elle prend la
   place que le cercle n'avait pas, au lieu de se superposer au coin. */
.compte-item.a-du-neuf{ position:relative; padding-right:26px; }
.compte-item.a-du-neuf::after{
  content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--gold);
}

/* ==== La cloche, les échanges et la discussion ==============================
   Trois écrans pour une seule idée : quelque chose t'attend, et il faut y
   répondre. C'est ce qui les sépare du fil des amis, qui se lit ou pas. */

/* ---- Le panneau de la cloche ---- */
.cloche-coin{ position:relative; display:inline-flex; }

.cloche-panneau{
  display:none;
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  width:340px; max-width:calc(100vw - 24px);
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:11px;
  box-shadow:var(--ombre);
  overflow:hidden;
}
.cloche-panneau.ouvert{ display:block; }

.cloche-entete{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--card-border);
  font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--ink);
}
.cloche-tout-lu{
  border:none; background:transparent; cursor:pointer; padding:2px 4px;
  font-family:var(--font-data); font-size:10.5px; letter-spacing:.05em;
  color:var(--ink-soft); text-transform:uppercase;
}
.cloche-tout-lu:hover{ color:var(--ink); text-decoration:underline; }

/* Huit lignes visibles, le reste au défilement : un panneau plus haut que la
   fenêtre déborderait sous l'écran sans qu'on puisse l'atteindre. */
.cloche-liste{ max-height:min(58vh, 430px); overflow-y:auto; padding:5px; }

.cloche-ligne{
  display:flex; gap:9px; width:100%; text-align:left;
  padding:9px 10px; border:none; border-radius:8px;
  background:transparent; cursor:pointer;
}
.cloche-ligne:hover{ background:var(--screen); }

/* Le non-lu se marque par un LISERÉ, pas par un fond : un fond coloré sur
   quatre lignes d'affilée fait un bloc, et on ne distingue plus les lignes. */
.cloche-ligne.neuve{ border-left:3px solid var(--dex-red); padding-left:7px; }

.cloche-icone{
  flex-shrink:0; display:grid; place-items:center;
  width:22px; height:22px; color:var(--ink-soft);
}
.cloche-corps{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cloche-titre{ font-family:var(--font-body); font-size:13px; color:var(--ink); }
.cloche-detail{
  font-family:var(--font-body); font-size:12px; color:var(--ink-soft);
  overflow-wrap:anywhere;
}
.cloche-quand{ font-family:var(--font-data); font-size:10px; color:var(--ink-faint); }

/* ---- Choisir dans les colonnes de l'entraide ---- */
/* Le choix se voit au cadre et au fond, pas à une coche : la ligne porte déjà
   un sprite et deux textes, une case de plus l'aurait encombrée. */
.echange-ligne.choisi{
  background:var(--caught-soft);
  box-shadow:inset 0 0 0 1.5px var(--caught);
}

.troc-barre{
  margin-top:14px; padding-top:13px;
  border-top:1px solid var(--card-border);
  display:flex; flex-direction:column; gap:9px;
}
.troc-choix{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-family:var(--font-body); font-size:13.5px;
}
/* Deux fentes à remplir. Vides elles portent la consigne, ce qui évite une
   ligne d'explication au-dessus ; pleines elles portent le nom. */
.troc-fente{
  flex:1 1 160px; min-width:0;
  padding:7px 11px; border-radius:8px;
  border:1px dashed var(--card-border);
  color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.troc-fente.rempli{
  border-style:solid; border-color:var(--caught);
  background:var(--caught-soft); color:var(--ink); font-weight:700;
}
.troc-contre{
  font-family:var(--font-data); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); flex:0 0 auto;
}
.troc-barre input{
  width:100%; padding:8px 11px; border-radius:8px;
  border:1px solid var(--card-border); background:var(--screen); color:var(--ink);
  font-family:var(--font-body); font-size:13px;
}
.troc-barre input:focus{ outline:none; border-color:var(--dex-red); }
.troc-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.troc-jeu{ font-family:var(--font-data); font-size:11px; color:var(--ink-soft); }

/* ---- La liste des échanges ---- */
.troc-preambule{ margin-bottom:10px; }
.troc-liste{ display:flex; flex-direction:column; gap:8px; }

.troc-ligne{
  display:flex; align-items:flex-start; gap:11px;
  padding:11px 13px;
  background:var(--card); border:1px solid var(--card-border); border-radius:11px;
  /* La bande de gauche porte l'état : on lit la couleur avant de lire la
     ligne, ce qui suffit à repérer ce qui attend une réponse. */
  border-left:3px solid var(--card-border);
}
.troc-ligne.etat-attente{ border-left-color:var(--gold); }
.troc-ligne.etat-ok{ border-left-color:var(--caught); }
.troc-ligne.etat-non{ border-left-color:var(--ink-faint); opacity:.72; }
.troc-ligne.etat-fini{ border-left-color:var(--caught); opacity:.72; }

.troc-avatar{ width:36px; height:36px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.troc-corps{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.troc-titre{ font-family:var(--font-body); font-size:13px; color:var(--ink-soft); }
.troc-quoi{
  font-family:var(--font-body); font-size:14.5px; font-weight:700; color:var(--ink);
  overflow-wrap:anywhere;
}
.troc-mot{
  font-family:var(--font-body); font-size:12.5px; color:var(--ink-soft);
  font-style:italic; overflow-wrap:anywhere;
}
.troc-bas{ display:flex; gap:9px; align-items:baseline; margin-top:2px; }
.troc-etat{
  font-family:var(--font-data); font-size:10px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft);
}
.troc-quand{ font-family:var(--font-data); font-size:10px; color:var(--ink-faint); }
.troc-actions-ligne{
  display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap;
  justify-content:flex-end; max-width:190px;
}

/* Sous 700 px les boutons passent sous la ligne : côte à côte, ils écrasaient
   le nom des Pokémon à deux ou trois caractères. */
@media (max-width:700px){
  .troc-ligne{ flex-wrap:wrap; }
  .troc-actions-ligne{ max-width:none; width:100%; justify-content:flex-start; }
}

/* ---- La discussion ---- */
.discussion-card{ width:min(560px, 94vw); }
.discussion-resume{
  font-family:var(--font-data); font-size:11px; color:var(--ink-soft);
  margin-bottom:11px;
}
.discussion-fil{
  display:flex; flex-direction:column; gap:8px;
  max-height:min(46vh, 340px); overflow-y:auto;
  padding:4px 2px; margin-bottom:11px;
}
.discussion-bulle{
  align-self:flex-start; max-width:82%;
  display:flex; flex-direction:column; gap:2px;
  padding:8px 11px; border-radius:11px 11px 11px 3px;
  background:var(--screen); border:1px solid var(--card-border);
}
/* Les miens à droite, dans la couleur de l'application. C'est la convention de
   toutes les messageries : la retenir évite d'avoir à lire « Toi » pour savoir
   qui parle. Le nom reste, pour qui ne la connaît pas. */
.discussion-bulle.de-moi{
  align-self:flex-end;
  border-radius:11px 11px 3px 11px;
  background:var(--caught-soft); border-color:var(--caught);
}
.discussion-qui{
  font-family:var(--font-data); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint);
}
.discussion-texte{
  margin:0; font-family:var(--font-body); font-size:13.5px; color:var(--ink);
  line-height:1.5; overflow-wrap:anywhere; white-space:pre-wrap;
}
.discussion-quand{ font-family:var(--font-data); font-size:9.5px; color:var(--ink-faint); }

.discussion-ecrire{ display:flex; gap:8px; }
.discussion-ecrire input{
  flex:1 1 auto; min-width:0;
  padding:9px 12px; border-radius:8px;
  border:1px solid var(--card-border); background:var(--screen); color:var(--ink);
  font-family:var(--font-body); font-size:13.5px;
}
.discussion-ecrire input:focus{ outline:none; border-color:var(--dex-red); }
.discussion-ecrire input:disabled{ opacity:.6; cursor:default; }

/* ---- Les photos de chasse -------------------------------------------------
   Le tableau alignait des chiffres : 2311 rencontres, 1/1365, treize jours.
   Cela dit l'effort, pas le moment. La vignette dit le moment.

   Elle est posee EN FIN DE LIGNE et non au debut : le sprite d'espece garde sa
   place de reperage, et la photo vient comme une piece jointe, pas comme un
   remplacant. */
.chasse-photo{
  flex:0 0 auto;
  width:44px; height:32px;
  margin-left:10px;
  padding:0; border:1px solid var(--card-border); border-radius:5px;
  background:var(--screen); cursor:pointer; overflow:hidden;
  display:grid; place-items:center;
  transition:border-color 120ms, transform 120ms;
}
.chasse-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.chasse-photo:hover{ border-color:var(--caught); transform:scale(1.06); }
.chasse-photo:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }

/* Sans photo : une invitation discrete. Elle ne doit pas attirer l'oeil plus
   que la ligne elle-meme — on vient lire un tableau de chasse, pas remplir un
   album. */
/* LA CASE VIDE EST UNE INVITATION, PAS UN TROU. Elle etait un cadre en
   pointilles a moitie transparent : un manque, et rien d'autre. Elle porte
   maintenant un fond degrade et un appareil photo dont l'objectif est dore —
   assez pour qu'on sache qu'on peut cliquer, assez discret pour ne pas voler la
   ligne, qui reste un tableau de chasse et non un album.

   PAS D'OPACITE GLOBALE : elle eteignait la teinte de l'objectif avec le reste.
   La discretion vient du fond et de la bordure, pas d'un voile pose dessus. */
.chasse-photo.vide{
  border-style:dashed; border-color:var(--card-border);
  color:var(--ink-faint);
  background:linear-gradient(140deg,
    color-mix(in srgb, var(--gold) 7%, var(--screen)) 0%,
    var(--screen) 62%);
}
.chasse-photo.vide:hover{
  transform:none; border-color:var(--gold); color:var(--ink-soft);
  background:linear-gradient(140deg,
    color-mix(in srgb, var(--gold) 16%, var(--screen)) 0%,
    var(--screen) 70%);
}

/* La visionneuse. Fond noir plutot que la carte habituelle : une capture de jeu
   se regarde sur du sombre, et le cadre clair lui volerait ses couleurs. */
.photo-card{
  width:min(880px, 94vw);
  background:#0b0c11;
  padding:14px;
  display:flex; flex-direction:column; gap:11px;
}
.photo-card img{
  width:100%; max-height:72vh; object-fit:contain;
  border-radius:7px; background:#000;
  /* Une hauteur de depart le temps du chargement : sans elle, la fenetre saute
     de trois cents pixels quand l'image arrive. */
  min-height:180px;
}
.photo-bas{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.photo-legende{
  font-family:var(--font-data); font-size:11.5px; color:var(--ink-soft);
}

/* ---- Je cherche -----------------------------------------------------------
   Une intention, pas un inventaire. La liste est courte par construction, elle
   n'a donc pas besoin de defiler ni de se replier. */
.fiche-cherche{
  align-self:flex-start; margin-top:9px;
  padding:6px 12px; border-radius:999px;
  border:1px dashed var(--card-border); background:transparent;
  color:var(--ink-soft); cursor:pointer;
  font-family:var(--font-body); font-size:12.5px;
  transition:border-color 120ms, color 120ms, background 120ms;
}
.fiche-cherche:hover{ color:var(--ink); border-color:var(--ink-faint); }
/* Inscrit : le trait plein et l'or. L'or plutot que le vert — le vert dit
   « obtenu » partout ailleurs dans l'application, et ceci dit « voulu ». */
.fiche-cherche.actif{
  border-style:solid; border-color:var(--gold);
  background:rgba(217,154,18,.12); color:var(--gold-deep); font-weight:700;
}

.cherche{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.cherche-ligne{
  display:flex; align-items:center; gap:11px;
  padding:9px 13px;
  background:var(--card); border:1px solid var(--card-border); border-radius:9px;
}
.cherche-nom{
  flex:0 0 auto; min-width:120px;
  font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--ink);
}
.cherche-chez{
  flex:1 1 auto; min-width:0;
  font-family:var(--font-body); font-size:12.5px; color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Trouve chez quelqu'un : c'est LA nouvelle de cette ligne, elle se detache. */
.cherche-chez.trouve{ color:var(--caught); font-weight:700; }
.cherche-oter{
  flex:0 0 auto; width:24px; height:24px; padding:0;
  border:none; border-radius:50%; background:transparent;
  color:var(--ink-faint); cursor:pointer; font-size:12px; line-height:1;
}
.cherche-oter:hover{ background:var(--screen); color:var(--danger); }

@media (max-width:560px){
  .cherche-ligne{ flex-wrap:wrap; }
  .cherche-chez{ white-space:normal; flex-basis:100%; }
}

/* ---- Les propositions de dresseurs ----------------------------------------
   Sous le champ, en superposition : la liste ne doit pas pousser « Mes amis »
   vers le bas a chaque lettre tapee. */
.amis-ajout{ position:relative; }
.amis-propositions{
  position:absolute; top:calc(100% + 4px); left:0; right:96px; z-index:40;
  background:var(--card); border:1px solid var(--card-border); border-radius:9px;
  box-shadow:var(--ombre); overflow:hidden;
}
.amis-proposition{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 11px; border:none; background:transparent; cursor:pointer;
  text-align:left;
  font-family:var(--font-body); font-size:13.5px; color:var(--ink);
}
.amis-proposition:hover{ background:var(--screen); }
.amis-proposition img{ width:24px; height:24px; border-radius:50%; flex-shrink:0; }
.proposition-nom{ flex:0 0 auto; font-weight:700; }
.proposition-etat{
  flex:1 1 auto; min-width:0; text-align:right;
  font-style:normal; font-family:var(--font-data); font-size:10px;
  color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Sous 560 px le bouton « Suivre » passe sous le champ : la liste reprend
   alors toute la largeur. */
@media (max-width:560px){
  .amis-propositions{ right:0; }
}

/* ===== L'écran des cadeaux mystères (voir js/cadeaux.js) =================
   Une ligne par distribution, 552 en tout. Les étiquettes portent tout ce qui
   décide : la catégorie, le statut chromatique, les jeux, la région et la
   date. C'est la région qui dit si l'évènement a pu concerner qui lit.      */
.cadeaux-filtres{ margin-bottom:10px; }
.cadeaux-filtres input[type="search"]{ flex:1 1 220px; min-width:0; }
.cadeaux-compte{
  font-family:var(--font-data); font-size:11px; color:var(--ink-soft);
  margin:0 0 10px;
}
.cadeaux-liste{ display:flex; flex-direction:column; }
.cadeau-ligne{
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 11px; border-radius:9px;
  border-bottom:1px solid var(--card-border);
}
.cadeau-ligne:last-child{ border-bottom:none; }
.cadeau-ligne:hover{ background:var(--screen); }
.cadeau-sprite{
  width:46px; height:46px; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--screen); border-radius:8px;
}
.cadeau-sprite img{ max-width:100%; max-height:100%; }
.cadeau-infos{ flex:1 1 auto; min-width:0; }
.cadeau-nom{ font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--ink); }
.cadeau-no{ font-family:var(--font-data); font-size:10px; color:var(--ink-faint); margin-left:6px; }
.cadeau-event{
  font-family:var(--font-body); font-size:12.5px; color:var(--ink-soft); margin-top:2px;
}
.cadeau-methode{
  font-family:var(--font-body); font-size:11.5px; font-style:italic;
  color:var(--ink-faint); margin-top:2px;
}
.cadeau-etiquettes{ margin-top:6px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.cadeau-etiq{
  font-family:var(--font-data); font-size:10px;
  border-radius:999px; padding:2px 8px; white-space:nowrap;
  border:1px solid var(--card-border); color:var(--ink-faint);
}
.cadeau-etiq.categorie{ color:var(--gold-deep); border-color:var(--gold-deep); }
.cadeau-etiq.chroma{ color:var(--caught); border-color:var(--caught); }
.cadeau-etiq.jeu{ color:var(--ink-soft); }
/* La région tranche : c'est elle qu'on cherche pour savoir si l'évènement a
   pu nous concerner, et elle se perdrait au milieu de six étiquettes grises. */
.cadeau-etiq.region{ color:var(--dex-red); border-color:var(--dex-red); }

/* La ligne est un bouton : elle ouvre la carte. On lui retire l'allure de
   bouton, on garde le geste. */
.cadeau-ligne{
  width:100%; text-align:left; border:none; border-bottom:1px solid var(--card-border);
  background:transparent; cursor:pointer; font:inherit; color:inherit;
}
.cadeau-ligne:focus-visible{ outline:2px solid var(--dex-red); outline-offset:-2px; }

/* ---- La carte d'une distribution ---- */
.cadeau-carte{ width:min(600px, 95vw); max-width:min(600px, 95vw); text-align:left; }
.cadeau-carte .modal-eyebrow,
.cadeau-carte .modal-title{ text-align:center; }
.cadeau-carte-corps{ max-height:min(64vh, 520px); overflow-y:auto; margin-top:14px; }
.cadeau-carte-tete{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.cadeau-carte-sprite{
  width:84px; height:84px; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--screen); border-radius:12px;
}
.cadeau-carte-sprite img{ max-width:100%; max-height:100%; }
.cadeau-carte-no{ font-family:var(--font-data); font-size:11px; color:var(--ink-faint); }
.cadeau-carte-chroma{
  font-family:var(--font-body); font-size:12.5px; color:var(--ink-soft);
  margin-top:4px; line-height:1.5;
}
/* ENCADRÉS COMME LES BLOCS D'OBTENTION D'UNE FICHE. Le vocabulaire vient de
   .obt-ligne : fond de carte, bordure fine, et un liseré de gauche de trois
   pixels qui porte le sens plutôt qu'un simple trait de séparation.

   Trois traits horizontaux se lisaient comme une seule longue liste ; trois
   cadres se comptent d'un coup d'œil. */
.cadeau-bloc{
  margin-top:12px; padding:11px 13px 12px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-left:3px solid var(--ink-faint);
  border-radius:9px;
}
/* Rouge : quand et comment on l'a distribué. Vert : ce qu'on a reçu — la même
   couleur que « capturé » ailleurs. Neutre : ce qui vient de la réserve et ne
   parle pas de cet exemplaire-là. */
.cadeau-bloc-quand{ border-left-color:var(--dex-red); }
.cadeau-bloc-recu{ border-left-color:var(--caught); }
.cadeau-bloc-absent{ border-left-color:var(--card-border); }
.cadeau-bloc-titre{
  font-family:var(--font-data); font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:7px;
}
/* TROIS COLONNES, ET C'EST LA GRILLE QUI LES TIENT. En rangées indépendantes,
   les valeurs tombaient bien au même pixel — mesuré — mais une icône posée
   devant le texte le poussait de trente et un pixels, et « Poké Ball » ne
   tombait plus sous « Synchro ». L'icône a désormais sa colonne, vide sur les
   lignes qui n'en ont pas, et les trois s'alignent d'elles-mêmes.

   LA COLONNE DU MILIEU EST FIXE, pas `auto`. Avec `auto` elle se réglait sur
   le contenu de CHAQUE bloc : nulle dans « La distribution » qui n'a pas
   d'icône, vingt-deux pixels dans « L'exemplaire » qui porte la Ball. Les deux
   blocs s'alignaient donc chacun de son côté, et pas l'un sur l'autre. Une
   largeur fixe coûte un retrait partout et rend la carte entière réglure. */
.cadeau-champs{
  display:grid; grid-template-columns:92px 24px 1fr;
  gap:5px 10px; align-items:center;
}
.cadeau-champ-cle{
  font-family:var(--font-data); font-size:10.5px; color:var(--ink-faint);
}
.cadeau-champ-icone{ display:flex; align-items:center; }
.cadeau-champ-val{
  font-family:var(--font-body); font-size:12.5px; color:var(--ink);
}

/* Les barres : la même lecture que sur la fiche d'une espèce. */
.cadeau-stat{ display:flex; align-items:center; gap:8px; padding:2px 0; }
.cadeau-stat-nom{
  flex:0 0 76px; font-family:var(--font-data); font-size:10px; color:var(--ink-faint);
}
.cadeau-stat-jauge{
  flex:1 1 auto; height:7px; border-radius:999px; background:var(--screen);
  overflow:hidden;
}
.cadeau-stat-jauge span{ display:block; height:100%; background:var(--caught); }
.cadeau-stat-val{
  flex:0 0 30px; text-align:right;
  font-family:var(--font-data); font-size:11px; color:var(--ink-soft);
}

/* LES LOGOS DE TYPE FONT 200 × 44, soit un rapport de 50:11. object-fit les
   empêche d'être écrasés quoi qu'on demande ; une case au mauvais rapport se
   contente donc de laisser un filet de vide, invisible à cette taille.
   Les capacités tiennent le rapport exactement (50 × 11) ; la puce principale
   arrondit à 72 × 16, ce qui laisse un demi-pixel.

   72 px ici plutôt que les 100 par défaut : la puce de type était la plus
   grosse chose de la carte, à côté d'un texte de 12,5 px. */
.cadeau-types{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.cadeau-types .type-img{ width:72px; height:16px; }
/* La Ball est un sprite de 30 px : 24 la rend nette sans l'agrandir, et
   pixelated évite le flou d'un lissage sur une image de cette taille. */
.cadeau-ball-img{ width:24px; height:24px; image-rendering:pixelated; }
.cadeau-capacites{ display:flex; flex-wrap:wrap; gap:5px; }
/* Une capacité : son nom, et la puce de son type sous lui — la même image
   que partout ailleurs dans l'application. */
.cadeau-capacite{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family:var(--font-body); font-size:11px; line-height:1.2;
  border:1px solid var(--card-border); border-radius:8px;
  padding:5px 7px 4px; color:var(--ink);
}
.cadeau-capacite .type-img{ width:50px; height:11px; }
/* Exclusive à la distribution : c'est souvent sa raison d'être. */
.cadeau-capacite.exclusive{ border-color:var(--gold-deep); }
.cadeau-capacite.exclusive .cadeau-capacite-nom{ color:var(--gold-deep); font-weight:700; }
/* Le repère des lignes documentées : discret, mais il dit où cliquer. */
.cadeau-etiq.detaille{ color:var(--caught); border-color:var(--caught); }

/* Ce qui manque se dit, plutôt que de laisser une section vide : un blanc se
   lit « il n'y en avait pas », ce qui est une réponse, et fausse. */
.cadeau-manque{
  margin:0; font-family:var(--font-body); font-size:12px; line-height:1.55;
  color:var(--ink-faint);
}

@media (max-width:560px){
  .cadeau-ligne{ gap:9px; padding:9px 8px; }
  .cadeau-sprite{ width:38px; height:38px; }
}

/* ---- Le calculateur de taux ------------------------------------------------
   Posé ici, à la suite des styles de chasse dont il reprend les cases à cocher.

   LE TAUX D'ABORD, GROS ET SEUL : c'est la réponse. Le détail dessous, en
   petit, parce qu'il sert à VÉRIFIER la réponse et non à la lire — et parce
   qu'un calcul écrit en gros au milieu d'une fenêtre se lit comme le résultat,
   ce qu'il n'est pas. */
.calc-taux{
  margin:18px 0 6px;
  font-family:var(--font-body);
  font-size:20px;
  text-align:center;
  color:var(--ink);
}
.calc-taux b{ font-family:var(--font-data); color:var(--gold-deep); }
.calc-detail{
  margin:0 0 15px;
  font-family:var(--font-data);
  font-size:11.5px;
  line-height:1.8;
  text-align:center;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.calc-detail b{ color:var(--ink); }

.calc-seuils{ display:grid; gap:6px; margin-bottom:16px; }
/* Deux colonnes plutôt qu'une phrase : les trois lignes se comparent d'un coup
   d'œil, et les nombres tombent les uns sous les autres. */
.calc-seuil{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:7px 11px; border-radius:9px;
  background:var(--screen); border:1px solid var(--card-border);
  font-family:var(--font-body); font-size:13px;
}
.calc-seuil-part{ color:var(--ink-soft); }
.calc-seuil-n{
  font-family:var(--font-data); font-size:12px; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---- Le compteur de rencontres ---------------------------------------------
   IL RESSEMBLE AUX TROIS SEUILS JUSTE AU-DESSUS, et ce n'est pas une
   coquetterie : c'est la meme question posee dans l'autre sens. Les seuils
   disent « pour 90 % de chances, tant de rencontres » ; le compteur dit « pour
   tant de rencontres, quelles chances ». Meme fond, meme bordure, meme rayon.

   LA FLECHE DU NAVIGATEUR EST RETIREE. Elle avance d'UN, et l'on compte ici en
   milliers : il fallait mille clics pour aller quelque part, sur un bouton de
   sept pixels. Les deux boutons a cote suivent l'ordre de grandeur du nombre
   affiche — voir calcPas() dans calculateur.js. */
.calc-compteur{
  display:flex; align-items:stretch; gap:7px;
}
.calc-compteur input[type="number"]{
  flex:1; min-width:0;
  padding:8px 11px; border-radius:9px;
  background:var(--screen); border:1px solid var(--card-border);
  color:var(--ink);
  font-family:var(--font-data); font-size:14px;
  font-variant-numeric:tabular-nums;
  text-align:center;
  /* Le compteur des rencontres est un nombre qu'on lit, pas une liste qu'on
     fait defiler : la molette dessus changeait la valeur en voulant faire
     defiler la fenetre. */
  -moz-appearance:textfield;
  appearance:textfield;
}
.calc-compteur input[type="number"]::-webkit-outer-spin-button,
.calc-compteur input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.calc-compteur input[type="number"]::placeholder{
  color:var(--ink-soft); font-family:var(--font-body); font-size:12.5px;
}
.calc-compteur input[type="number"]:focus{
  outline:none;
  border-color:var(--gold-deep);
}
.calc-pas{
  flex:0 0 auto; width:38px;
  border-radius:9px;
  background:var(--screen); border:1px solid var(--card-border);
  color:var(--ink-soft);
  font-family:var(--font-body); font-size:17px; line-height:1;
  cursor:pointer;
  transition:color .12s, border-color .12s;
}
.calc-pas:hover{ color:var(--ink); border-color:var(--gold-deep); }
.calc-pas:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
.calc-pas:disabled{ opacity:.4; cursor:default; }
.calc-pas:disabled:hover{ color:var(--ink-soft); border-color:var(--card-border); }

.calc-proba{
  margin:9px 0 0;
  font-family:var(--font-body); font-size:13.5px;
  text-align:center; color:var(--ink);
  /* Réservée même vide : sans cela, taper un chiffre fait sauter la fenêtre. */
  min-height:21px;
}
.calc-proba b{ font-family:var(--font-data); color:var(--gold-deep); }

/* ---- La messagerie ---------------------------------------------------------
   Deux etats dans une seule fenetre : la liste des conversations et le fil de
   l'une d'elles. Les bulles viennent de .discussion-* — c'est la meme chose a
   l'ecran, et un second jeu de styles aurait diverge au premier ajustement.

   LA FENETRE A UNE HAUTEUR FIXE, contrairement aux autres. Passer de la liste
   au fil changeait sa taille d'un coup, et le bouton « Fermer » sautait sous le
   curseur au moment ou l'on cliquait. */
/* LA MESSAGERIE EST UNE PAGE, plus une fenetre. Elle etait a l'etroit dans une
   modale, et surtout elle empruntait le menu deroulant de la page des amis :
   positionne en absolu, cale sur un bouton  Suivre  qui n existe pas ici. Les
   propositions se dessinaient hors du cadre — presentes, invisibles. */
.msg-page{
  display:grid;
  /* La colonne de gauche a une largeur A ELLE : un pseudo et un apercu tiennent
     dans 260 px, et le fil merite tout le reste. */
  grid-template-columns:260px 1fr;
  gap:14px;
  min-height:min(62vh, 520px);
  align-items:stretch;
}
.msg-cote{
  display:flex; flex-direction:column; gap:0; min-width:0;
  padding-right:14px; border-right:1px solid var(--card-border);
}
.msg-vue{ display:flex; flex-direction:column; min-width:0; }

/* Ce qu'on voit tant qu'aucune conversation n'est ouverte. Centre dans la
   colonne plutot que colle en haut : un grand vide avec une phrase en haut a
   gauche se lit comme un ecran casse. */
.msg-rien{
  flex:1 1 auto; display:grid; place-items:center; text-align:center;
  padding:24px; color:var(--ink-soft);
  font-family:var(--font-body); font-size:13px; line-height:1.6;
}

/* SOUS 760 px, UNE COLONNE A LA FOIS. Deux colonnes de 130 px ne servent
   personne : on montre la liste, et le fil prend toute la place des qu'on en
   ouvre un — d'ou la fleche de retour, qui ne sert que la. */
@media (max-width:760px){
  .msg-page{ grid-template-columns:1fr; }
  .msg-cote{ padding-right:0; border-right:0; }
  .msg-page.fil-ouvert .msg-cote{ display:none; }
  .msg-page:not(.fil-ouvert) .msg-vue{ display:none; }
}
@media (min-width:761px){
  /* La fleche ne sert a rien quand les deux colonnes sont la. */
  .msg-retour{ display:none; }
}

/* Les propositions reprennent le FLUX. C est tout l interet de la page : elles
   n ont plus a se poser par-dessus quoi que ce soit, donc plus rien a caler sur
   la largeur d un bouton. */
#msgPropositions{
  position:static; right:auto; left:auto; top:auto;
  box-shadow:none; background:transparent; border:0;
  display:flex; flex-direction:column; gap:4px; margin-bottom:10px;
}
#msgPropositions:empty{ margin-bottom:0; }
#msgPropositions .amis-proposition{
  border:1px solid var(--card-border); border-radius:9px; background:var(--screen);
}
#msgPropositions .amis-proposition:hover{ border-color:var(--gold); }

.msg-entete{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.msg-entete .modal-title{ margin:0; }
/* Un carre, pas un bouton de texte : c'est une fleche, elle n'a pas de libelle
   a faire respirer. */
.msg-retour{ padding:5px 11px; font-size:15px; line-height:1; flex-shrink:0; }

#msgQ{
  width:100%; padding:9px 12px; border-radius:8px; margin-bottom:10px;
  border:1px solid var(--card-border); background:var(--screen); color:var(--ink);
  font-family:var(--font-body); font-size:13.5px;
}
#msgQ:focus{ outline:none; border-color:var(--dex-red); }

.msg-liste{ display:flex; flex-direction:column; gap:6px; flex:1 1 auto;
  overflow-y:auto; min-height:0; }
/* Le nom de l interlocuteur, en tete de la colonne de droite. Il remplace le
   second  Messages  qui doublait le titre de la page. */
.msg-avec{
  flex:1 1 auto; min-width:0; margin:0;
  font-family:var(--font-display); font-size:13px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.msg-conv{
  display:flex; align-items:center; gap:10px; text-align:left;
  padding:9px 11px; border-radius:10px; cursor:pointer;
  background:var(--screen); border:1px solid var(--card-border);
  font-family:var(--font-body); color:var(--ink);
  transition:border-color 120ms;
}
.msg-conv:hover{ border-color:var(--gold); }
.msg-conv-avatar{ width:32px; height:32px; border-radius:50%; flex-shrink:0; }
/* min-width:0 sur le conteneur ET l'apercu : sans lui, une flexbox refuse de
   retrecir son enfant sous la longueur du texte, et l'ellipse ne prend jamais. */
.msg-conv-corps{ display:flex; flex-direction:column; gap:1px; flex:1 1 auto; min-width:0; }
.msg-conv-nom{ font-size:13.5px; }
.msg-conv-apercu{
  font-size:11.5px; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.msg-conv.non-lu .msg-conv-nom{ font-weight:600; }
.msg-conv.non-lu .msg-conv-apercu{ color:var(--ink); }
.msg-conv-pastille{
  flex-shrink:0; min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center; border-radius:999px;
  background:var(--dex-red); color:#fff;
  font-family:var(--font-data); font-size:10.5px;
}

/* Le fil occupe la place laissee libre, plutot qu'une hauteur a lui : sinon la
   zone de saisie flotte au milieu quand la conversation est courte. */
.msg-fil{ flex:1 1 auto; max-height:none; }
.discussion-ecrire textarea{
  flex:1 1 auto; min-width:0; resize:none;
  padding:9px 12px; border-radius:8px;
  border:1px solid var(--card-border); background:var(--screen); color:var(--ink);
  font-family:var(--font-body); font-size:13.5px; line-height:1.5;
}
.discussion-ecrire textarea:focus{ outline:none; border-color:var(--dex-red); }

.amis-actions{ display:flex; gap:8px; margin-bottom:10px; }

/* La recherche du panneau d'entraide. Meme dessin que les autres champs de
   fenetre : ce n'est pas un element a part, c'est un champ de plus. */
#echangeQ{
  width:100%; padding:9px 12px; border-radius:8px; margin-bottom:12px;
  border:1px solid var(--card-border); background:var(--screen); color:var(--ink);
  font-family:var(--font-body); font-size:13.5px;
}
#echangeQ:focus{ outline:none; border-color:var(--dex-red); }

/* L'en-tete de la messagerie tient trois choses : le retour, le nom, et la
   proposition d'echange. Le nom pousse le bouton a droite plutot qu'une marge
   fixe — un pseudo court ne doit pas laisser un trou au milieu. */
.msg-entete .modal-title{ flex:1 1 auto; min-width:0; }
.msg-echange{ flex-shrink:0; padding:5px 11px; font-size:11.5px; white-space:nowrap; }

/* De quel echange parle ce message. Au-dessus du texte et non a cote : une
   bulle est etroite, et la phrase « Abra contre Machopeur » y tiendrait mal en
   partageant la ligne. */
.msg-sujet{
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-data); font-size:10px;
  color:var(--gold-deep); opacity:.85;
  max-width:100%;
}
.msg-sujet span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* La ligne de rangement de la fiche, et le titre d'une famille de blocages :
   deux libelles qui portent maintenant un dessin devant eux. Le meme ecart
   partout, plutot qu'une espace typographique dans la chaine. */
.rangement-ou,
.blocage-titre{ display:flex; align-items:center; gap:6px; }
/* La marque « je le cherche » d'une liste de blocages : un dessin, pas une
   lettre — donc plus de font-size, et la couleur vient du texte. */
.blocage-cherche{ display:inline-grid; place-items:center; color:var(--gold); }
.discussion-bulle.de-moi .msg-sujet{ color:var(--gold); }

/* La pastille de messages en attente, dans le menu du compte.
   Posée en absolu et centrée verticalement : une entrée de menu porte un titre
   et un sous-titre, donc deux lignes de hauteur inegale — l'aligner dans le
   flux la faisait descendre avec le sous-titre. */
/* Augmente la regle de la ligne 246 plutot que de la reecrire : la pastille
   est le seul enfant a positionner, et deplacer le reste pour elle exposerait
   tout le menu a une regression. */
.compte-item{ position:relative; }
.compte-item-pastille{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center; border-radius:999px;
  background:var(--dex-red); color:#fff;
  font-family:var(--font-data); font-size:10.5px;
}


/* ---- La mise a jour en cours ------------------------------------------------
   Elle vivait dans le bouton de l'en-tete, en « 42 % ». Neuf megaoctets
   racontes par deux chiffres dans trente pixels. */
.maj-fenetre{ width:100%; max-width:440px; text-align:left; position:relative; }

/* LA JAUGE. Une barre pleine et non des tirets qui defilent : on veut savoir
   OU on en est, pas seulement que quelque chose tourne. Elle passe en mouvement
   perpetuel pour la seule etape qui n'a pas de progression — l'installation,
   ou l'installeur Windows reprend la main et ne dit plus rien. */
.maj-jauge{
  height:8px; margin:14px 0 10px;
  background:var(--screen); border-radius:999px; overflow:hidden;
}
.maj-jauge > i{
  display:block; height:100%; width:0;
  background:var(--gold); border-radius:999px;
  transition:width 180ms linear;
}
.maj-jauge.indeterminee > i{
  width:38%;
  animation:maj-va-et-vient 1.1s ease-in-out infinite;
}
@keyframes maj-va-et-vient{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(300%); }
}
@media (prefers-reduced-motion:reduce){
  .maj-jauge.indeterminee > i{ animation:none; width:100%; opacity:.5; }
  .maj-jauge > i{ transition:none; }
}
.maj-etat{
  margin:0; font-family:var(--font-body); font-size:13px; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.maj-note{
  margin:6px 0 0; font-family:var(--font-body); font-size:11.5px;
  color:var(--ink-soft); line-height:1.45;
}
.maj-fenetre .modal-actions{ margin-top:16px; }

/* ---- Joindre un Pokémon à un message ----------------------------------------
   Le joint et sa recherche vivent AU-DESSUS du champ, pas dedans : on doit voir
   ce qu'on s'apprête à envoyer avant de l'envoyer, et pouvoir le retirer. */
/* LE CADRE COMMUN DES PIECES JOINTES. Il s'etire sur toute la hauteur de la
   rangee — donc du champ de saisie, qui la fixe — et les deux boutons s'y
   centrent. Poses seuls, ils flottaient sous un champ dont ils n'atteignaient
   pas la hauteur : deux petits carres et un grand rectangle, trois objets pour
   une seule rangee.

   Meme bordure et meme rayon que le champ : c'est un bloc de la rangee, pas une
   piece rapportee. Le fond, lui, est celui de la CARTE et non de l'ecran, pour
   que les boutons qu'il contient — eux sur --screen — s'en detachent. */
.msg-outils{
  display:flex; align-items:center; gap:6px;
  align-self:stretch; flex-shrink:0;
  padding:0 6px; border-radius:8px;
  border:1px solid var(--card-border); background:var(--card);
}
/* Un peu plus petits que le bouton a icone ordinaire : ils vivent DANS un
   cadre, et la taille pleine ne laissait plus de marge autour d'eux. */
.msg-joindre{ width:30px; height:30px; border-radius:7px; }
.msg-joindre,
.msg-jointe-oter{ -webkit-appearance:none; appearance:none; }
.msg-joindre .ic{ vertical-align:0; }
/* Ouvert : le bouton reste allume tant que son tiroir l'est. Sans cela on ne
   sait plus lequel des deux on a ouvert. */
.msg-joindre.on{ color:var(--gold); border-color:var(--gold); background:var(--screen); }

/* Ce qu'on s'apprete a envoyer, au-dessus du champ. Une puce et non un cadre :
   c'est une piece jointe en attente, pas une section de l'ecran. */
.msg-jointe{
  display:flex; align-items:center; gap:9px; margin-bottom:8px;
  align-self:flex-start; max-width:100%;
  padding:5px 5px 5px 8px; border-radius:999px;
  background:var(--screen); border:1px solid var(--gold);
  font-family:var(--font-body); font-size:12.5px; color:var(--ink);
}
.msg-jointe img{
  width:28px; height:28px; object-fit:contain; flex-shrink:0;
  border-radius:50%; background:var(--card);
}
/* Une photo se recadre, un sprite se contient : l'un remplit son rond, l'autre
   doit rester entier. */
.msg-jointe.photo img{ object-fit:cover; }
.msg-jointe span{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.msg-jointe-oter{
  display:grid; place-items:center; flex-shrink:0;
  width:24px; height:24px; padding:0;
  border:0; border-radius:50%; background:none; cursor:pointer;
  color:var(--ink-soft); transition:color 120ms, background 120ms;
}
.msg-jointe-oter:hover{ color:#fff; background:var(--danger); }
.msg-jointe-oter:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }

.msg-poke{ margin-bottom:8px; }
/* Le nom prend la place, la generation prend ce qu'il lui faut : un nom de
   Pokemon est long, « Generation 5 — Unys » a une largeur connue. */
.msg-poke-haut{ display:flex; gap:6px; align-items:center; }
.msg-poke-haut #msgPokeQ{ flex:1 1 auto; min-width:0; }
.msg-poke-haut select{ flex:0 0 auto; max-width:46%; }
#msgPokeQ{ padding:8px 11px; border-radius:8px;
  border:1px solid var(--card-border); background:var(--screen); color:var(--ink);
  font-family:var(--font-body); font-size:13px;
}
#msgPokeQ:focus{ outline:none; border-color:var(--dex-red); }
.msg-poke-liste{ display:flex; flex-direction:column; gap:3px; margin-top:6px;
  max-height:150px; overflow-y:auto; }
.msg-poke-ligne{
  display:flex; align-items:center; gap:8px; text-align:left;
  padding:5px 9px; border-radius:8px; cursor:pointer;
  background:var(--screen); border:1px solid var(--card-border);
  font-family:var(--font-body); font-size:12.5px; color:var(--ink);
}
.msg-poke-ligne:hover{ border-color:var(--gold); }
.msg-poke-ligne img{ width:26px; height:26px; object-fit:contain; flex-shrink:0; }

/* La carte, dans la bulle. Cliquable — elle mène à la fiche de l'espèce, ce qui
   est la raison d'être de la pièce jointe : on parle d'un Pokémon, l'autre doit
   pouvoir le regarder sans le rechercher. */
.msg-carte{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  margin:2px 0 5px; padding:5px 9px; border-radius:9px; cursor:pointer;
  background:var(--card); border:1px solid var(--card-border);
  font-family:var(--font-body); font-size:12.5px; color:var(--ink);
}
.msg-carte:hover{ border-color:var(--gold); }
.msg-carte:disabled{ cursor:default; opacity:.7; }
.msg-carte img{ width:34px; height:34px; object-fit:contain; flex-shrink:0; }

/* ---- Joindre une photo de chasse --------------------------------------------
   Le tiroir des photos emprunte le cadre du sélecteur de Pokémon (.msg-poke),
   mais s'étale en GRILLE : une photo se reconnaît d'un coup d'œil, un nom de
   Pokémon se lit. */
/* « Depuis mon ordinateur » : la premiere chose du tiroir, et la plus large.
   C'est le geste attendu — les photos de chasse viennent apres, pour qui les a. */
.msg-televerser{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:10px 12px; margin-bottom:6px;
  border:1px dashed var(--card-border); border-radius:10px;
  background:var(--screen); color:var(--ink); cursor:pointer;
  font-family:var(--font-body); font-size:12.5px;
  transition:border-color 120ms, color 120ms;
}
.msg-televerser:hover{ border-color:var(--gold); }
.msg-televerser:focus-visible{ outline:2px solid var(--dex-red); outline-offset:2px; }
.msg-photos-aide{
  margin:0 0 10px; font-family:var(--font-body); font-size:11px;
  color:var(--ink-faint); text-align:center;
}
.msg-photos-mot{
  font-family:var(--font-body); font-size:12px; color:var(--ink-soft);
  margin-bottom:6px; line-height:1.45;
}
.msg-photos-liste{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));
  gap:6px; max-height:190px; overflow-y:auto;
}
.msg-photo-choix{
  display:flex; flex-direction:column; gap:4px; padding:4px; cursor:pointer;
  border-radius:8px; background:var(--screen); border:1px solid var(--card-border);
  font-family:var(--font-body); font-size:11px; color:var(--ink);
}
.msg-photo-choix:hover{ border-color:var(--gold); }
/* Le cadre est pose AVANT que la photo arrive — chaque vignette est un
   aller-retour derriere un jeton. Un degrade plutot qu'un gris plat : on voit
   qu'une image se prepare, au lieu d'un carre mort. */
.msg-photo-choix img{
  width:100%; height:62px; object-fit:cover; border-radius:5px;
  background:linear-gradient(140deg, var(--card-border), var(--screen));
}
.msg-photo-choix span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left;
}
/* La photo reçue, dans la bulle. Bornée en hauteur : une photo de téléphone
   tenue en portrait remplirait le fil à elle seule. */
.msg-photo{
  display:block; width:100%; max-width:260px; margin:2px 0 5px;
  padding:0; border:1px solid var(--card-border); border-radius:9px;
  overflow:hidden; cursor:pointer; background:var(--card);
}
.msg-photo:hover{ border-color:var(--gold); }
.msg-photo img{ display:block; width:100%; max-height:220px; object-fit:cover; }
/* La photo qu'on ne peut plus ouvrir : effacee depuis, ou l'aventure repassee
   en privee. Une carte a part entiere plutot qu'une ligne de texte — le message
   parlait d'une image, et son absence merite la meme place qu'elle. */
.msg-photo.vide{
  display:flex; align-items:center; gap:8px;
  padding:11px 13px; cursor:default; text-align:left;
  border-style:dashed; color:var(--ink-faint);
  background:linear-gradient(140deg,
    color-mix(in srgb, var(--ink-soft) 6%, var(--card)) 0%,
    var(--card) 70%);
  font-family:var(--font-body); font-size:12px;
}

/* La colonne de droite pendant qu'un fichier la survole. Un liseré, pas un
   voile : recouvrir la conversation cacherait justement ce a quoi on repond. */
.msg-vue.depose{
  outline:2px dashed var(--gold); outline-offset:-6px; border-radius:12px;
}

/* « Écrire à « X » » quand la recherche ne trouve personne. Sans vignette — il
   n'y a pas d'avatar pour quelqu'un qu'on n'a pas trouvé — donc un retrait à
   gauche pour que le nom tombe où tombent les autres. */
.msg-exact{ padding-left:14px; font-style:italic; }

/* Chercher dans les messages. Meme dessin que le champ  A qui ecrire  : deux
   questions differentes, mais deux champs de meme nature. */
#msgRecherche{
  width:100%; padding:8px 11px; border-radius:8px; margin-bottom:10px;
  border:1px solid var(--card-border); background:var(--screen); color:var(--ink);
  font-family:var(--font-body); font-size:12.5px;
}
#msgRecherche:focus{ outline:none; border-color:var(--dex-red); }

/* Un resultat n'est pas une conversation : il porte une date, et l'apercu peut
   se derouler sur deux lignes puisque c'est lui qu'on est venu lire. */
.msg-trouve{ align-items:flex-start; }
.msg-trouve .msg-conv-apercu{ white-space:normal; overflow:visible; }
.msg-trouve-quand{
  flex-shrink:0; font-family:var(--font-data); font-size:10px;
  color:var(--ink-faint); white-space:nowrap; padding-top:2px;
}

/* ---- Ce qui attend une reponse ---------------------------------------------
   Un bandeau, pas une notification. La couleur d'attention est l'or et non le
   rouge : personne n'a rien casse, quelqu'un attend. */
.troc-rappels{ display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.troc-rappel{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 15px; border-radius:9px;
  background:color-mix(in srgb, var(--gold) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}
.troc-rappel-pict{ font-size:17px; line-height:1.3; flex-shrink:0; }
.troc-rappel-txt{ flex:1; min-width:0; font-family:var(--font-body); font-size:13.5px; color:var(--ink); }
.troc-rappel-actions{ display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }

/* ---- Les echanges conclus --------------------------------------------------
   Plus discrets que les vivants : on les consulte, on n'agit plus dessus. */
.troc-historique{ display:flex; flex-direction:column; }
.troc-histo-resume{
  margin:0 0 10px; font-family:var(--font-body); font-size:12.5px;
  color:var(--ink-soft);
}
.troc-histo-ligne{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--card-border);
  font-family:var(--font-body); font-size:13px; color:var(--ink);
}
.troc-histo-quoi{ min-width:0; }
.troc-histo-quand{
  flex-shrink:0; font-family:var(--font-data); font-size:10px;
  color:var(--ink-faint); white-space:nowrap;
}

/* ---- La galerie des chromatiques -------------------------------------------
   Une grille de vignettes, pas une liste : c'est une collection qu'on regarde,
   et l'image y compte plus que le chiffre. */
.galerie-filtres{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.galerie-puce{
  font-family:var(--font-body); font-size:12px; padding:5px 12px;
  border-radius:999px; cursor:pointer;
  background:var(--screen); border:1px solid var(--card-border); color:var(--ink-soft);
}
.galerie-puce:hover{ border-color:var(--gold); }
.galerie-puce.on{ border-color:var(--gold); color:var(--gold-deep); background:var(--card); }

.galerie-grille{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px;
}
.galerie-carte{
  padding:0; cursor:pointer; text-align:left; overflow:hidden;
  background:var(--card); border:1px solid var(--card-border); border-radius:10px;
  transition:border-color 120ms;
}
.galerie-carte:hover{ border-color:var(--gold); }
.galerie-carte:disabled{ cursor:default; opacity:.75; }
.galerie-image{
  position:relative; height:98px; display:grid; place-items:center;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--gold) 12%, transparent), var(--screen));
}
.galerie-image img{ max-width:82%; max-height:82%; object-fit:contain; }
/* Une vignette de sprite au milieu de photos ressemble a une photo manquante.
   C'est ce qu'elle est : autant l'ecrire plutot que de laisser deviner. */
.galerie-sans{
  position:absolute; bottom:5px; left:0; right:0; text-align:center;
  font-family:var(--font-data); font-size:8.5px; color:var(--ink-faint);
}
.galerie-bas{ padding:8px 10px; }
.galerie-nom{ font-family:var(--font-body); font-size:12.5px; color:var(--ink); }
.galerie-chiffres{
  font-family:var(--font-data); font-size:9.5px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

/* ---- L'etat du releve ------------------------------------------------------
   Un tableau, parce qu'on y compare des jeux entre eux : les cartes empechent
   justement la comparaison colonne par colonne. */
.releve-tableau{
  background:var(--card); border:1px solid var(--card-border);
  border-radius:10px; padding:14px 16px; overflow-x:auto;
}
.releve-tete, .releve-ligne{
  display:grid; grid-template-columns:1.6fr repeat(4,64px) 1fr;
  gap:10px; align-items:center; min-width:540px;
}
.releve-tete{
  font-family:var(--font-data); font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint);
  padding-bottom:8px; border-bottom:1px solid var(--card-border);
}
.releve-tete span:not(:first-child){ text-align:center; }
.releve-ligne{ padding:8px 0; border-bottom:1px solid var(--screen-edge); }
.releve-jeu{ font-family:var(--font-body); font-size:13px; color:var(--ink); }
.releve-etat{
  justify-self:center; width:17px; height:17px; border-radius:5px;
  display:grid; place-items:center;
  font-family:var(--font-data); font-size:9.5px; font-weight:700;
}
.releve-etat.oui{ background:var(--caught-soft); color:var(--caught); }
.releve-etat.non{
  background:color-mix(in srgb, var(--danger) 13%, transparent); color:var(--danger);
}
.releve-etat.sans-objet{ background:var(--screen); color:var(--ink-faint); }
.releve-jauge{
  height:5px; border-radius:999px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 10%, transparent);
}
.releve-jauge i{ display:block; height:100%; background:var(--caught); }
.releve-jauge.partiel i{ background:var(--gold); }
.releve-jauge.vide i{ background:var(--danger); }
.releve-legende{ margin-top:14px; font-size:12.5px; }
.releve-legende b{ font-family:var(--font-data); color:var(--ink); }