/* Abri Rétro-Ball : la direction artistique du jeu, 80 % Pokémon et 20 % abri.
   Un Centre Pokémon creusé sous la montagne : couleurs du logo Pokémon, formes rondes, trait d'encre et ombre pleine
   comme un autocollant ; l'acier riveté et les cadrans rétro seulement en bordure ; les rayures de danger réservées aux alertes.
   Chargée après style.css, elle la recouvre (sélecteurs préfixés par « html »). Pendant Halloween, la classe
   « theme-halloween » posée sur <html> (fetes.js) remplace le rouge par l'orange citrouille et le bleu par le violet. */

@font-face { font-family: 'Fredoka'; src: url(../fonts/fredoka-latin.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url(../fonts/rubik-latin.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url(../fonts/silkscreen-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --da-accent: #E3350D;
  --da-accent-fonce: #A82508;
  --da-jaune: #FFCB05;
  --da-bleu: #2A75BB;
  --da-eau: #6BB8F0;
  --da-creme: #FFF6E5;
  --da-blanc: #FFFFFF;
  --da-encre: #1C1B2E;
  --da-acier: #8A97A3;
  --da-doux: #555368;
  --da-ciel: #2A75BB;
  --da-voile: rgba(28, 27, 46, 0.55);
  --da-pv: #3BC65A;
  --da-titres: 'Fredoka', 'Rubik', system-ui, sans-serif;
  --da-texte: 'Rubik', system-ui, sans-serif;
  --da-chiffres: 'Silkscreen', 'Rubik', monospace;
  /* Les variables de l'ancienne interface, redirigées vers la nouvelle palette. */
  --vert: var(--da-accent);
  --vert-bouton: var(--da-accent);
  --vert-moyen: var(--da-blanc);
  --vert-sombre: var(--da-creme);
  --vert-noir: var(--da-encre);
  --texte: var(--da-encre);
  --doux: var(--da-doux);
  --rouge: #C4122F;
  --or: #D99A00;
  --lisere: none;
}
html.theme-halloween {
  --da-accent: #F26B1D;
  --da-accent-fonce: #B44708;
  --da-jaune: #FFC94A;
  --da-bleu: #7B4FC4;
  --da-creme: #FFF1DC;
  --da-encre: #1A1426;
  --da-acier: #8C8299;
  --da-ciel: #2B1B45;
  --da-voile: rgba(26, 20, 38, 0.6);
}

html, html body { color: var(--da-encre); font-family: var(--da-texte); }
html .petit { color: var(--da-doux); }

/* ---------- Les compteurs du haut : des pastilles crème cerclées d'encre ---------- */
html #hud { color: var(--da-encre); font-family: var(--da-chiffres); font-weight: 400; font-stretch: normal; font-size: 17px; text-shadow: none; gap: 8px 12px; }
html #hud .icone { filter: none; }
html #hud-pop .icone { color: var(--da-acier); filter: drop-shadow(2px 0 0 var(--da-encre)) drop-shadow(-2px 0 0 var(--da-encre)) drop-shadow(0 2px 0 var(--da-encre)) drop-shadow(0 -2px 0 var(--da-encre)) drop-shadow(0 3px 0 var(--da-encre)); }
html #hud-pop b { color: var(--da-encre); font-family: var(--da-titres); font-weight: 700; }
html #hud-attente { background: var(--da-jaune); border: 2px solid var(--da-encre); color: var(--da-encre); font-family: var(--da-titres); font-weight: 700; }
html #hud-bonheur, html #hud-droite > span {
  padding: 4px 12px 4px 8px;
  background: var(--da-creme);
  border: 3px solid var(--da-encre);
  border-radius: 20px;
  box-shadow: 0 3px 0 var(--da-encre);
}
html #hud-bonheur { margin-top: 12px; }
html #hud-bonheur .icone { color: var(--da-accent); }
html #hud-droite { gap: 6px 8px; max-width: 340px; }
html #hud-droite .mini { font-size: 15px; }
html #hud-chroma, html #hud-chroma b { color: var(--da-encre); }
html #hud-chroma { background: var(--da-jaune); }
html #hud-bonbons, html #hud-bonbons b { color: var(--da-encre); }
html .jauge .rond { width: 44px; height: 44px; background: var(--da-creme); border: 3px solid var(--da-encre); box-shadow: 0 3px 0 var(--da-encre); color: var(--da-encre); }
html .jauge[data-res="energie"] .rond { background: var(--da-jaune); }
html .jauge[data-res="baies"] .rond { background: var(--da-accent); color: var(--da-creme); }
html .jauge[data-res="eau"] .rond { background: var(--da-eau); }
html .jauge .barre { height: 22px; background: var(--da-creme); border: 3px solid var(--da-encre); border-left: 0; border-radius: 0 12px 12px 0; box-shadow: 0 3px 0 var(--da-encre); }
html .jauge .barre > i { border-radius: 0; }
html .jauge[data-res="energie"] .barre > i { background: var(--da-jaune); }
html .jauge[data-res="baies"] .barre > i { background: var(--da-accent); }
html .jauge[data-res="eau"] .barre > i { background: var(--da-eau); }
html .jauge.alerte .rond { background: var(--rouge); color: var(--da-creme); box-shadow: 0 3px 0 var(--da-encre); }
html .jauge.alerte .barre { border-color: var(--da-encre); }
html .jauge.alerte .barre > i { background: var(--rouge); }

/* Les barres : piste crème, remplissage à l'accent ; les PV en vert. */
html .barre { background: var(--da-creme); border: 2px solid var(--da-encre); border-radius: 8px; }
html .barre > i { background: var(--da-accent); }
html #fiche .barre.vie > i { background: var(--da-pv); }
html #fiche .barre.vie.ko > i { background: var(--rouge); }

/* ---------- Les cadres : guide, fiche, salle choisie, menu, messages ---------- */
html #guide, html #fiche, html #salle-info, html #menu, html .toast {
  background: var(--da-creme);
  border: 3px solid var(--da-encre);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--da-encre);
  color: var(--da-encre);
}
html .toast { font-family: var(--da-titres); font-weight: 600; font-size: 16px; border-radius: 18px; }
html #guide .tete b { color: var(--da-accent); font-family: var(--da-titres); font-size: 17px; }
html #guide button, html .fermer {
  padding: 5px 16px;
  background: var(--da-accent);
  color: var(--da-creme);
  border: 3px solid var(--da-encre);
  border-radius: 18px;
  box-shadow: 0 3px 0 var(--da-encre);
  font-family: var(--da-titres);
  font-weight: 600;
}
html #fiche { color: var(--da-encre); border-radius: 22px; }
html .titre-fiche { font-family: var(--da-titres); font-stretch: normal; color: var(--da-encre); text-shadow: none; }
html .fermer-fiche { background: var(--da-blanc); color: var(--da-encre); border: 3px solid var(--da-encre); border-radius: 50%; line-height: 1; }
html #fiche .pilule { background: var(--da-blanc); border: 2px solid var(--da-encre); color: var(--da-encre); }
html #fiche .niveau { font-family: var(--da-chiffres); font-size: 16px; font-weight: 400; }
html .special span { width: 14px; background: var(--da-creme); border: 2px solid var(--da-encre); border-radius: 6px; overflow: hidden; }
html .special span i { background: var(--da-accent); }
html .special b { font-family: var(--da-titres); font-size: 16px; }
html .special em { font-family: var(--da-chiffres); font-size: 10px; color: var(--da-doux); }
html .special em.bonus { color: var(--or); }
html .tuiles button { background: var(--da-jaune); color: var(--da-encre); border: 3px solid var(--da-encre); border-radius: 16px; box-shadow: 0 3px 0 var(--da-encre); font-family: var(--da-titres); }
html #salle-info { color: var(--da-encre); font-family: var(--da-titres); font-stretch: normal; font-weight: 600; font-size: 19px; border-radius: 22px; }
html #salle-info .nom { text-shadow: none; }
html #salle-info .ligne button { color: var(--da-encre); }
html #salle-info .ligne button small { font-family: var(--da-texte); color: var(--da-doux); }
html #salle-info .ligne button.danger { color: var(--rouge); }
html .occupants .portrait { border: 2px solid var(--da-encre); border-radius: 50%; }

/* ---------- Le marteau (jaune, rond) et le Pokématos (rouge, comme un appareil de dresseur) ---------- */
html #boutons { gap: 16px; }
html #boutons button { display: flex; align-items: center; justify-content: center; border: 4px solid var(--da-encre); box-shadow: 0 6px 0 var(--da-encre); filter: none; }
html #boutons button:hover { filter: brightness(1.06); }
html #boutons button:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--da-encre); }
html #btn-construire { width: 74px; height: 74px; border-radius: 50%; background: var(--da-jaune); color: var(--da-encre); }
html #btn-construire .icone { width: 42px; height: 42px; }
html #btn-pokematos { width: 88px; height: 88px; border-radius: 26px; background: var(--da-accent); color: var(--da-creme); }
html #btn-pokematos .icone { width: 60px; height: 54px; }
/* Le Pokématos : ses boutons sur deux colonnes, pour qu'il tienne toujours dans l'écran (il défile en dernier recours). */
html #menu { bottom: 116px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; gap: 7px; max-height: calc(100vh - 130px); overflow-y: auto; background: var(--da-accent); border-width: 4px; border-radius: 24px; }
html #menu[hidden] { display: none; }
html #menu button { min-width: 168px; }
html #menu button { background: var(--da-creme); color: var(--da-encre); border-radius: 16px; box-shadow: 0 3px 0 var(--da-encre); font-size: 15px; }

/* ---------- Les boutons : pilules rouges cerclées d'encre ---------- */
html #menu button, html .actions button, html .onglets button, html .regions button, html .filtres button, html .objectif button, html .rangee button, html .lieu button, html .expedition > button, html .choix-compte button,
html .reponses button, html .actions.centre button, html .reglage button, html .article button, html .objet-tenu button, html .choix-objets button {
  border: 3px solid var(--da-encre);
  border-radius: 22px;
  box-shadow: 0 4px 0 var(--da-encre);
  font-family: var(--da-titres);
  font-weight: 600;
}
html .actions button, html .objectif button, html .rangee button, html .lieu button, html .expedition > button, html .choix-compte button,
html .reponses button, html .actions.centre button, html .reglage button, html .article button, html .objet-tenu button, html .choix-objets button {
  background: var(--da-accent);
  color: var(--da-creme);
}
html .onglets button, html .regions button, html .filtres button { background: var(--da-blanc); color: var(--da-encre); }
html .onglets button.actif, html .regions button.actif, html .filtres button.actif { background: var(--da-jaune); color: var(--da-encre); border-color: var(--da-encre); }
html #menu button:active, html .actions button:active, html .onglets button:active, html .filtres button:active, html .reponses button:active, html .choix-compte button:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--da-encre); }
html button.danger { background: var(--da-creme) !important; border: 3px solid var(--rouge) !important; color: var(--rouge) !important; box-shadow: none !important; }
html .point { background: var(--da-jaune); border: 2px solid var(--da-encre); }

/* ---------- Le panneau central ---------- */
html #panneau { background: var(--da-voile); }
html #panneau .contenu { background: var(--da-creme); border: 4px solid var(--da-encre); border-radius: 26px; box-shadow: 0 8px 0 var(--da-encre); scrollbar-color: var(--da-acier) var(--da-creme); }
html h1, html h2 { font-family: var(--da-titres); color: var(--da-encre); font-weight: 700; }
html h2.centre { color: var(--da-encre); }
html h3 { font-family: var(--da-titres); color: var(--da-accent-fonce); font-size: 17px; }
html a { color: var(--da-accent-fonce); }
html .accroche b { color: var(--da-accent); }
html .portrait { background: var(--da-creme); border-radius: 10px; }
html .menus-rapides { border-bottom: 3px solid var(--da-encre); }
html .menus-rapides button { background: var(--da-blanc); color: var(--da-encre); border: 2px solid var(--da-encre); border-radius: 14px; font-family: var(--da-titres); font-weight: 600; }
html .menus-rapides button:hover { border-color: var(--da-accent); }
html .menus-rapides button.actif { background: var(--da-accent); color: var(--da-creme); border-color: var(--da-encre); }
html .valeur-tri { color: var(--da-accent-fonce); font-family: var(--da-chiffres); }
html .icone-objet.grande { background: var(--da-creme); border-radius: 10px; }

/* Les cartes, rangées et cases : blanc cerclé d'encre. */
html .rangee, html .carte, html .lieu, html .quete, html .ami, html .objectif, html .expedition, html .article, html .retour-recu, html .especes-zone, html .journal {
  background: var(--da-blanc);
  border: 3px solid var(--da-encre);
  border-radius: 16px;
  color: var(--da-encre);
}
html .case, html .choix { background: var(--da-blanc); border: 2px solid var(--da-encre); border-radius: 12px; color: var(--da-encre); }
html .case:hover, html .choix:hover, html button.rangee:hover, html .carte:hover:not(:disabled), html .quete:hover { border-color: var(--da-accent); }
html .choix.pris, html .quete.choisie { background: var(--da-jaune); border-color: var(--da-encre); }
html .case.envie { background: #FFF0B3; border-color: var(--or); }
html .case.legende { border-color: #8B5CF6; }
html .rangee .petit, html .lieu .petit, html .quete .petit, html .ami .petit, html .objectif .petit, html .expedition .petit, html .especes-zone .petit { color: var(--da-doux); }
html .carte b, html .quete b, html .expedition .entete b { color: var(--da-encre); font-family: var(--da-titres); font-stretch: normal; }
html .carte .cout { color: var(--da-encre); }
html .carte small { color: var(--da-doux); }
html .vignette { border: 2px solid var(--da-encre); border-radius: 10px; background: var(--da-creme); }
html .vignette.magneti { background: #E7EEF5; }
html .etoiles { color: var(--da-accent); }
html .etoiles i { color: #D8CFBE; }
html .type { border: 2px solid var(--da-encre); text-shadow: none; }
html .case .rarete { color: var(--da-accent); }
html .journal { background: var(--da-creme); }
html .journal .titre { color: var(--da-accent-fonce); }
html .journal .lui { color: var(--da-accent-fonce); }
html .vs { color: var(--da-accent); font-family: var(--da-titres); }
html .cote .portrait, html .adversaires .portrait { border: 4px solid var(--da-encre); border-radius: 50%; }
html .elu, html .starter { background: var(--da-blanc); color: var(--da-encre); border: 3px solid var(--da-encre); border-radius: 18px; box-shadow: 0 4px 0 var(--da-encre); font-family: var(--da-titres); }
html .reponses button, html .actions.centre button { font-size: 17px; }

/* Champs, réglages, détails, questions. */
html select, html input[type="text"], html textarea { background: var(--da-blanc); color: var(--da-encre); border: 3px solid var(--da-encre); border-radius: 12px; }
html .reglage { color: var(--da-encre); }
html .reglage input { accent-color: var(--da-accent); }
html summary { color: var(--da-accent-fonce); }
html .credits { color: var(--da-doux); }
html .credits b { color: var(--da-encre); }
html .sac { color: var(--da-encre); }
html .voyant { background: #CFC6B4; border-color: var(--da-encre); }
html .voyant.allume { background: var(--da-pv); box-shadow: none; }
html .retour-recu { border-left-width: 3px; }
html .retour-recu .reponse-donnee { border-left: 3px solid var(--da-jaune); background: #FFF8D6; }
html #question { background: var(--da-voile); }
html #question .boite { background: var(--da-creme); border: 4px solid var(--da-encre); border-radius: 24px; box-shadow: 0 6px 0 var(--da-encre); }
html #plan-ami { border: 3px solid var(--da-encre); border-radius: 12px; }

/* Le bloc de la fête dans les Objectifs : une nuit violette. */
html .fete { background: #2B1B45; color: #FFF1DC; border: 3px solid var(--da-encre); border-radius: 18px; box-shadow: 0 4px 0 var(--da-encre); }
html .fete > b { color: #FFC94A; font-family: var(--da-titres); }
html .fete .petit { color: #E5D5F5; }
html .fete .objectif { background: rgba(255, 241, 220, 0.1); color: #FFF1DC; border-color: #FFC94A; }
html .fete .objectif .petit { color: #E5D5F5; }
html .case.hante { outline: 3px solid #F26B1D; outline-offset: -3px; }

/* La carte de dresseur. */
html .carte-dresseur { background: var(--da-blanc); border: 3px solid var(--da-encre); border-radius: 22px; box-shadow: 0 5px 0 var(--da-encre); }
html .cd-tete .cd-avatar { border: 3px solid var(--da-encre); background: var(--da-creme); }
html .cd-nom { color: var(--da-encre); font-family: var(--da-titres); }
html .cd-titre { background: var(--da-jaune); border: 2px solid var(--da-encre); color: var(--da-encre); font-family: var(--da-titres); }
html .cd-vitrine .membre { background: var(--da-creme); border: 2px solid var(--da-encre); border-radius: 12px; }
html .cd-vitrine .membre.vide { border: 2px dashed var(--da-acier); background: none; }
/* Les vrais badges : en couleur une fois gagnés, en silhouette avant. */
html .cd-region span { gap: 5px; }
html .cd-badge { width: 30px; height: 30px; border: 0; border-radius: 0; background: none; box-shadow: none; }
html .cd-badge img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) opacity(0.22); }
html .cd-badge.gagne img { filter: drop-shadow(0 1px 0 rgba(28, 27, 46, 0.35)); }
html .cd-badge.pixel img { image-rendering: pixelated; }
html .cd-badge.ligue { border: 2px solid var(--da-encre); border-radius: 50%; background: #EDE6D6; font-size: 15px; }
html .cd-badge.ligue.gagne { background: #FFF0B3; }
html .cd-choix { background: var(--da-blanc); border: 3px solid var(--da-encre); border-radius: 14px; color: var(--da-encre); }
html .cd-choix b { color: var(--da-encre); font-family: var(--da-titres); }
html .cd-choix.actif { background: var(--da-jaune); border-color: var(--da-encre); }
html .cd-choix.verrou b { color: var(--da-doux); }

/* L'écran-titre (l'accueil) a sa propre feuille : css/accueil.css. */

/* ---------- Petits écrans ---------- */
@media (max-width: 720px) {
  html #hud { font-size: 14px; }
  html .jauge .rond { width: 36px; height: 36px; }
  html .jauge .barre { height: 18px; }
  html #btn-construire { width: 60px; height: 60px; }
  html #btn-construire .icone { width: 34px; height: 34px; }
  html #btn-pokematos { width: 72px; height: 72px; border-radius: 22px; }
  html #btn-pokematos .icone { width: 48px; height: 44px; }
  html #menu { bottom: 96px; max-height: calc(100vh - 110px); gap: 6px; padding: 8px; }
  html #menu button { min-width: 0; padding: 8px 10px; font-size: 14px; }
  html .cd-badge { width: 24px; height: 24px; }
  html .cd-region span { gap: 3px; }
  html #hud-droite { max-width: 196px; gap: 5px 6px; margin-top: 4px; }
  html #hud-droite > span { padding: 2px 8px; }
  html #hud-droite .mini { font-size: 13px; }
  html #guide { top: calc(var(--bas-hud, 112px) + 8px); }
  html #fiche { top: calc(var(--bas-hud, 104px) + 6px); max-height: calc(100vh - var(--bas-hud, 104px) - 20px); }
  html #toasts { top: calc(var(--bas-hud, 112px) + 90px); }
}

/* ---------- Les expéditions : le paysage de chaque lieu ---------- */
html .expedition { background-size: cover; background-position: center; background-repeat: no-repeat; }
html .banniere-zone {
  display: flex;
  align-items: flex-end;
  height: 140px;
  margin-top: 10px;
  padding: 8px 10px;
  background: #cfe3c0 center / cover no-repeat;
  border: 3px solid var(--da-encre);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--da-encre);
}
html .banniere-zone b { padding: 2px 10px; background: var(--da-creme); border: 2px solid var(--da-encre); border-radius: 10px; font: 700 15px var(--da-titres); }

/* ---------- Les légendaires : l'antre de chacun en fond de sa ligne ---------- */
html .rangee.legendaire { min-height: 66px; background-size: cover; background-position: center; background-repeat: no-repeat; }

/* ---------- Ma carte de dresseur : le fond en bandeau, la vitrine modifiable, les grilles de choix ---------- */
html .carte-dresseur { position: relative; }
html .carte-dresseur.avec-fond { background-size: cover; background-position: center; }
/* Le mode modification : la photo se touche (crayon), le bouton du fond se pose en haut à droite de la carte. */
html .cd-changer-photo { position: relative; flex: none; padding: 0; background: none; border: 0; border-radius: 50%; cursor: pointer; }
html .cd-changer-photo .cd-avatar { display: block; outline: 3px dashed var(--da-accent); outline-offset: 2px; }
html .cd-changer-photo::after { content: "✎"; position: absolute; right: -4px; bottom: -2px; width: 26px; height: 26px; display: grid; place-items: center; background: var(--da-accent); color: #fff; border: 2px solid var(--da-encre); border-radius: 50%; font: 700 14px var(--da-titres); }
html .cd-changer-fond { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 6px 12px; background: var(--da-jaune); border: 3px solid var(--da-encre); border-radius: 18px; box-shadow: 0 3px 0 var(--da-encre); font: 700 13px var(--da-titres); cursor: pointer; }
html .carte-dresseur.modifiable .cd-vitrine .membre { cursor: pointer; border-style: dashed; border-color: var(--da-accent); transition: transform 0.12s; }
html .carte-dresseur.modifiable .cd-vitrine .membre:hover { transform: translateY(-2px); background: #FFF0B3; }
html .carte-dresseur.modifiable .cd-vitrine .membre.vide::after { content: "+"; display: grid; place-items: center; height: 100%; color: var(--da-accent); font: 700 26px var(--da-titres); }
html #cd-recherche { width: 100%; margin: 6px 0; padding: 8px 12px; border: 3px solid var(--da-encre); border-radius: 14px; font: 500 15px var(--da-texte); }
html .cd-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
html .cd-grille.fonds { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
html .cd-option { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; background: var(--da-blanc); border: 2px solid var(--da-encre); border-radius: 12px; cursor: pointer; }
html .cd-option:hover { background: #FFF0B3; }
html .cd-option[hidden] { display: none; }
html .cd-option .portrait { width: 56px; height: 56px; }
html .cd-option small { font-size: 11px; text-align: center; line-height: 1.2; }
html .cd-option .cd-miniature { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 2px solid var(--da-encre); }

/* Le défi d'un légendaire : son antre en bandeau, avec son portrait, son type et son niveau. */
html .defi-legendaire { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; padding: 14px; background-size: cover; background-position: center; border: 3px solid var(--da-encre); border-radius: 18px; box-shadow: 0 5px 0 var(--da-encre); }
html .defi-legendaire h2 { margin: 0 0 2px; }
html .defi-legendaire > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
html .defi-legendaire .portrait.grand { width: 88px; height: 88px; border: 3px solid var(--da-encre); border-radius: 50%; background: var(--da-creme); }
html .defi-legendaire .niveau-defi { font: 400 14px var(--da-chiffres); }

/* Les espèces pas encore obtenues : en gris si on les a croisées, en silhouette noire sinon. */
html .silhouette { display: block; margin: 2px auto; background-repeat: no-repeat; image-rendering: pixelated; filter: brightness(0); opacity: 0.8; }
html .case.inconnu .silhouette { opacity: 0.7; }
html .case.vu .portrait, html .portrait.grise { filter: grayscale(1); opacity: 0.75; }
html .cadre-silhouette { display: grid; place-items: center; width: 40px; height: 40px; }
html .cadre-silhouette.grand { width: 88px; height: 88px; border: 3px solid var(--da-encre); border-radius: 50%; background: var(--da-creme); }

/* La liste de tous les légendaires : un titre par région, ceux des zones fermées sous cadenas. */
html .region-legendaires { margin: 12px 0 4px; }
html .rangee.legendaire.verrou { background: rgba(28, 27, 46, 0.06); border-style: dashed; }

/* « Mes Pokémon » : trois onglets (abri, PC, expédition), le bouton « Sélectionner » à côté du tri, les cases à cocher
   et la barre d'actions collée en bas du panneau. */
html .onglets button small { margin-left: 4px; padding: 0 6px; background: rgba(28, 27, 46, 0.12); border-radius: 9px; font-size: 12px; }
html .outils-liste { display: flex; align-items: flex-start; gap: 8px; }
html .outils-liste .zone-tri { flex: 1; min-width: 0; }
html .btn-selection { flex: none; margin-top: 4px; padding: 5px 12px; background: var(--da-blanc); border: 2px solid var(--da-encre); border-radius: 14px; font-weight: 700; cursor: pointer; }
html .btn-selection.actif { background: var(--da-jaune); }
html button.lien { padding: 0; background: none; border: 0; color: var(--da-accent); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
html .rangee .coche { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid var(--da-encre); border-radius: 50%; background: var(--da-blanc); color: #fff; font-weight: 900; }
html .rangee.choisi { border-color: var(--da-accent); background: #FFE9DF; }
html .rangee.choisi .coche { background: var(--da-accent); }
html .barre-selection { position: sticky; bottom: -16px; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 10px -4px -4px; padding: 10px 12px; background: var(--da-creme); border: 3px solid var(--da-encre); border-radius: 16px; box-shadow: 0 -4px 14px rgba(28, 27, 46, 0.2); }
html .barre-selection b { flex: 1; }
html .barre-selection button:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 520px) {
  html .outils-liste { flex-direction: column-reverse; }
  html .btn-selection { align-self: flex-end; }
  html .barre-selection { flex-wrap: wrap; }
  html .barre-selection b { flex-basis: 100%; }
}
/* En mode sélection, la case à cocher prend une colonne de plus, devant le portrait. */
html .rangee.a-cocher { grid-template-columns: 26px 40px 1fr auto auto 130px; }
@media (max-width: 720px) {
  html .rangee.a-cocher { grid-template-columns: 26px 40px 1fr auto auto; }
}

/* Le sprite de l'œuf mystère (16 × 16) : en double dans le sac, pour garder des pixels nets. */
html .icone-objet.icone-oeuf { width: 24px; height: 24px; }
html .sac .icone-objet.icone-oeuf { width: 32px; height: 32px; margin: -4px 0; }
html #btn-oeuf .icone-oeuf { margin: -6px 2px -6px 0; }

/* Les arènes : l'arène peinte en bandeau avec son badge, puis le parcours des neuf badges de la région. */
html .arene-banniere { display: flex; align-items: center; gap: 14px; margin: 10px 0 8px; padding: 16px 14px; min-height: 120px; background-size: cover; background-position: center; border: 3px solid var(--da-encre); border-radius: 18px; box-shadow: 0 5px 0 var(--da-encre); color: var(--da-encre); }
html .arene-banniere > div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
html .arene-banniere h3 { margin: 0 0 2px; font-size: 20px; }
html .arene-banniere .niveau-defi { font: 400 14px var(--da-chiffres); }
html .arene-banniere .cd-badge.grand { flex: none; width: 72px; height: 72px; display: grid; place-items: center; background: var(--da-creme); border: 3px solid var(--da-encre); border-radius: 50%; font-size: 36px; }
html .arene-banniere .cd-badge.grand img { width: 52px; height: 52px; object-fit: contain; filter: none; opacity: 1; }
html .parcours-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
html .parcours-badges .cd-badge.prochain { outline: 3px solid var(--da-accent); outline-offset: 2px; border-radius: 50%; animation: badge-prochain 1.6s ease-in-out infinite; }
@keyframes badge-prochain { 50% { outline-color: var(--da-jaune); } }
@media (max-width: 520px) {
  html .arene-banniere { gap: 10px; padding: 12px 10px; }
  html .arene-banniere .cd-badge.grand { width: 56px; height: 56px; font-size: 28px; }
  html .arene-banniere .cd-badge.grand img { width: 40px; height: 40px; }
}

/* Le jeu a repris dans un autre onglet (js/onglet.js) : celui-ci se met en pause, par-dessus tout. */
.autre-onglet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(28, 27, 46, 0.78); }
.autre-onglet > div { max-width: 420px; padding: 22px; text-align: center; background: var(--da-creme, #FFF6E5); color: var(--da-encre, #1C1B2E); border: 3px solid var(--da-encre, #1C1B2E); border-radius: 20px; box-shadow: 0 6px 0 var(--da-encre, #1C1B2E); }
.autre-onglet b { display: block; margin-bottom: 6px; font: 700 20px var(--da-titres, sans-serif); }
.autre-onglet .actions { justify-content: center; }