/* Carte du monde (/pokedesk/carte) : page plein écran, menu à gauche, carte pixel art interactive.
   Feuille autonome (la page n'a pas la feuille inline des autres pages). La carte reste une illustration claire dans
   les deux thèmes ; le menu, la bulle et les annonces suivent le thème (contraste AA). */
:root {
  --fond: #f6f1e7; --papier: #fffdf8; --encre: #2b2620; --doux: #5f574c; --ligne: #ddd3c2;
  --vert: #82d650; --vert-fonce: #3f8a2f; --bouton-encre: #1f1b16; --discord: #4752c4;
  --focus: #1a5fb4; --moi: #b3361f; --erreur: #b3361f; --ombre: rgba(0, 0, 0, .28);
  --mer: #8de0ea; --menu-l: 340px; --titre: #283870; --rouge-titre: #c93434;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1c1a17; --papier: #25221e; --encre: #f1ebe0; --doux: #c0b6a6; --ligne: #3d372f;
    --focus: #8cc4ff; --moi: #ff9b85; --erreur: #ff9b85; --ombre: rgba(0, 0, 0, .55);
    --titre: #badcf6; --rouge-titre: #f06e6e;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--fond); color: var(--encre);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%;
}
a { color: inherit; text-decoration-color: var(--vert-fonce); text-decoration-thickness: 2px; text-underline-offset: 3px; }
img.px, .sprite { image-rendering: pixelated; image-rendering: crisp-edges; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- mise en page : menu à gauche, carte sur tout le reste ---- */
#carte-app { display: grid; grid-template-columns: var(--menu-l) minmax(0, 1fr); height: 100vh; height: 100dvh; }
#carte-app.menu-cache { grid-template-columns: minmax(0, 1fr); }

.menu { background: var(--papier); border-right: 3px solid #1a1a1a; overflow-y: auto; overscroll-behavior: contain;
        display: flex; flex-direction: column; min-height: 0; z-index: 30; }
.menu-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 0 12px; }
.home { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 20px; text-decoration: none;
        min-height: 44px; }
.pages { display: flex; flex-wrap: wrap; gap: 0 16px; padding: 0 12px 6px; border-bottom: 1px solid var(--ligne); }
.pages a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.pages a[aria-current] { text-decoration: underline; text-decoration-color: var(--vert-fonce); text-decoration-thickness: 3px; }
.mentions { color: var(--doux); font-size: 12px; margin: auto 0 0; padding: 12px; }

/* sections du menu (accordéon natif) */
.sections { padding: 4px 0 8px; }
.sections > details { border-bottom: 1px solid var(--ligne); }
.sections > details > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 12px;
  font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; }
.sections > details > summary::-webkit-details-marker { display: none; }
.sections > details > summary { color: var(--titre); }
.sections > details > summary::before { content: "▶"; color: var(--rouge-titre); font-size: 12px; width: 14px; flex: none; }
.sections > details[open] > summary::before { content: "▾"; }
.sections > details > summary .compte-n { margin-left: auto; color: var(--doux); font-weight: 600; font-size: 14px; }
.sections > details > summary:focus-visible { outline-offset: -3px; }
.corps { padding: 0 12px 14px; }
.corps p { margin: 0 0 8px; }
.corps h3 { font-size: 15px; margin: 12px 0 4px; }
.doux { color: var(--doux); font-size: 14px; }
.carte-cnx { padding: 12px; border-bottom: 1px solid var(--ligne); }
.carte-cnx p { margin: 0 0 10px; }

/* boutons (cibles ≥ 44 px) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px;
       padding: 6px 16px; border-radius: 8px; border: 2px solid #1a1a1a; font: inherit; font-weight: 700;
       background: var(--vert); color: var(--bouton-encre); cursor: pointer; text-decoration: none; box-shadow: 0 2px 0 #1a1a1a; }
.btn.second { background: var(--papier); color: var(--encre); border-color: var(--doux); box-shadow: none; }
.btn.discord { background: var(--discord); color: #fff; }
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.btn.mini { min-width: 44px; padding: 0 8px; font-size: 18px; }
.lien { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left;
        text-decoration: underline; text-decoration-color: var(--vert-fonce); text-decoration-thickness: 2px;
        text-underline-offset: 3px; min-height: 44px; }
.icone-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px;
             padding: 0 10px; border: 2px solid #1a1a1a; border-radius: 8px; background: #fffdf5; color: #1a1a1a;
             font: 700 20px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 0 #1a1a1a; }
.icone-btn:disabled { opacity: .45; cursor: default; }
#menu-ouvrir { font-size: 16px; padding: 0 14px; }
.menu-tete .icone-btn { box-shadow: none; }

/* formulaires */
.case { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; line-height: 1.3; }
.case input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--vert-fonce); }
select, input[type=text] { font: inherit; min-height: 44px; padding: 4px 8px; border: 2px solid var(--doux);
  border-radius: 6px; background: var(--papier); color: var(--encre); min-width: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; font-weight: 700; }

/* chiffres de « Mes infos » */
dl.chiffres { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 6px 0 10px; }
dl.chiffres dt { color: var(--doux); }
dl.chiffres dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.corps p.rarete { margin: 10px 0 4px; font-weight: 600; }
.sauvages { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 2px 4px; list-style: none;
            margin: 0 0 4px; padding: 0; }
.sauvages li { text-align: center; font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }
.sauvages img { width: 56px; height: 56px; display: block; margin: -6px auto -6px; }
.joueurs-zone { list-style: none; margin: 0; padding: 0; }
.joueurs-zone li { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--ligne); }
.joueurs-zone li:first-child { border-top: 0; }
.joueurs-zone .lien { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.joueurs-zone small { color: var(--doux); font-size: 13px; white-space: nowrap; }
.pastille { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--doux); flex: none; display: inline-block; }
.pastille.on { background: #3fae2a; border-color: #1a1a1a; }
.liste-zones { list-style: none; margin: 0; padding: 0; }
.liste-zones li { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--ligne); }
.liste-zones li:first-child { border-top: 0; }
.liste-zones .qui { flex: 1 1 150px; min-width: 0; }
.liste-zones .qui small { display: block; color: var(--doux); font-size: 13px; }
.verrou-txt { font-weight: 700; }
.cadenas { display: inline-block; width: 11px; height: 8px; background: currentColor; position: relative; margin: 0 7px 0 2px;
           vertical-align: -1px; }
.cadenas::before { content: ""; position: absolute; left: 2px; top: -6px; width: 3px; height: 5px;
                   border: 2px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; }

/* ---- la carte ---- */
.vue { position: relative; overflow: hidden; min-width: 0; min-height: 0; background: var(--mer); margin: 0; }
#carte { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none;
         user-select: none; -webkit-user-select: none; cursor: grab;
         font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#carte.glisse { cursor: grabbing; }
#carte image { image-rendering: pixelated; image-rendering: crisp-edges; }
.outils { position: absolute; display: flex; gap: 8px; z-index: 6; }
.outils-gauche { top: 12px; left: 12px; }
.outils-droite { right: 12px; bottom: 24px; flex-direction: column; }
.chargement { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); margin: 0; background: #fffdf5;
              color: #1a1a1a; border: 2px solid #1a1a1a; border-radius: 6px; padding: 6px 12px; font-weight: 600; z-index: 7; }
.annonce { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 8; margin: 0;
           width: max-content; max-width: calc(100% - 140px); font-weight: 600; background: var(--papier); color: var(--encre);
           border: 3px solid #2f6e2a; border-radius: 8px; padding: 8px 14px; box-shadow: 0 3px 0 #1a1a1a; }
.annonce:empty { display: none; }
.annonce.erreur { border-color: var(--erreur); }

/* fond dessiné par carte.js quand carte-fond.png manque (couleurs fixes) */
.f-mer { fill: #8de0ea; }
.f-haute-mer { fill: #5fc3dc; }
.f-contour { fill: #1a1a1a; }
.f-falaise { fill: #9c5a33; }
.f-vague { fill: #ffffff; opacity: .8; }

/* zones : transparentes ; s'éclairent au survol, au focus et quand elles sont choisies */
.zone { cursor: pointer; outline: none; }
.zone .cible { fill: transparent; pointer-events: all; stroke: transparent; stroke-width: 2; vector-effect: non-scaling-stroke; }
.zone:hover .cible { fill: rgba(255, 255, 255, .22); stroke: #1a1a1a; stroke-width: 2.5; stroke-dasharray: 8 5; }
.zone.choisie .cible { fill: rgba(255, 255, 255, .16); stroke: #1a1a1a; stroke-width: 3; stroke-dasharray: none; }
.zone:focus-visible .cible { fill: rgba(255, 255, 255, .3); stroke: #1a5fb4; stroke-width: 5; stroke-dasharray: none; }
.zone .hachures { fill: url(#hachures); pointer-events: none; }
.hachure { fill: rgba(26, 26, 26, .16); }
.zone.ici .cible { stroke: rgba(179, 54, 31, .7); stroke-width: 2.5; stroke-dasharray: 3 5; }
/* nom du biome en grand, en fond : clair, semi-transparent, contour sombre (lisible sur la neige comme sur la forêt) */
.nom-fond { font-weight: 800; letter-spacing: .04em; text-anchor: middle; dominant-baseline: central;
            fill: rgba(255, 253, 245, .78); paint-order: stroke; stroke: rgba(20, 16, 12, .72); stroke-linejoin: round;
            pointer-events: none; text-transform: uppercase; }
.zone:hover .nom-fond, .zone:focus-visible .nom-fond, .zone.choisie .nom-fond { fill: #fff; stroke: rgba(10, 8, 6, .92); }
.exigence rect { fill: #fffdf5; stroke: #1a1a1a; stroke-width: 2; vector-effect: non-scaling-stroke; }
.exigence text { fill: #1a1a1a; font-weight: 700; dominant-baseline: central; }
.exigence .cad { fill: #1a1a1a; }
.exigence.ferme rect { fill: #ffe9a8; }

/* joueurs : silhouettes discrètes, taille fixe à l'écran (--k = 1 / échelle) */
.joueur { cursor: pointer; outline: none; color: #2b2620; opacity: .78; }
.joueur.hors-ligne { opacity: .42; }
.joueur.moi { color: #c8402f; opacity: 1; }
.joueur:hover, .joueur:focus-visible { opacity: 1; }
.pion { transform: scale(var(--k, 1)); }
/* arènes (feature arenes) : un bâtiment par zone, taille fixe à l'écran comme les pions (appliquerVue) */
.arene .etoile { fill: #ffd84a; stroke: #1a1a1a; stroke-width: 2; vector-effect: non-scaling-stroke; }
.arene-info small { opacity: .8; }
.arene-info .gagne, .bulle .gagne { color: #2e7d32; font-weight: 700; }
.arene-info .bloque { font-weight: 700; }
.arene { cursor: pointer; }
.arene .verrou-ic { fill: #8a8a8a; stroke: #1a1a1a; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.arene .anse { stroke: #1a1a1a; stroke-width: 2; vector-effect: non-scaling-stroke; }
.bulle .equipe-arene { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0 0 6px; padding: 0; list-style: none; }
.bulle .equipe-arene li { display: flex; flex-direction: column; align-items: center; width: 64px; font-size: 11px;
  line-height: 1.2; text-align: center; }
.bulle .equipe-arene img { width: 48px; height: 48px; margin: -6px 0 -4px; }
.bulle .recompenses small { opacity: .8; }
.pion .halo { fill: #fffdf5; }
.pion .corps { fill: currentColor; }
.pion .touche { fill: transparent; pointer-events: all; }
.pion .anneau { fill: none; stroke: #1a5fb4; stroke-width: 3; opacity: 0; }
.joueur:focus-visible .anneau { opacity: 1; }
.joueur.moi .halo { fill: #fff; }
.pion .toi { font: 700 13px system-ui, sans-serif; fill: #c8402f; text-anchor: middle; paint-order: stroke;
             stroke: #fffdf5; stroke-width: 4px; stroke-linejoin: round; }
.joueur.choisi .anneau { opacity: 1; stroke: #1a1a1a; stroke-dasharray: 4 3; }

/* nom du joueur au survol / au focus */
.survol { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -100%);
          background: #fffdf5; color: #1a1a1a; border: 2px solid #1a1a1a; border-radius: 6px; padding: 2px 8px;
          font-size: 14px; font-weight: 700; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
          box-shadow: 0 2px 0 #1a1a1a; }
.survol small { font-weight: 400; color: #4d453b; }

/* la bulle, ancrée au point cliqué */
.bulle { position: absolute; z-index: 10; width: min(310px, calc(100% - 24px)); background: var(--papier); color: var(--encre);
         border: 3px solid #1a1a1a; border-radius: 8px; padding: 10px 14px 14px; box-shadow: 0 4px 0 #1a1a1a;
         font-size: 15px; line-height: 1.45; max-height: calc(100% - 24px); overflow-y: auto; }
.bulle h2 { font-size: 18px; line-height: 1.25; margin: 2px 44px 6px 0; overflow-wrap: anywhere; }
.bulle h2:focus { outline: none; }
.bulle h2:focus-visible { outline: 3px solid var(--focus); }
.bulle p { margin: 0 0 6px; }
.bulle .fermer { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; background: none;
                 color: var(--encre); font-size: 26px; line-height: 1; cursor: pointer; border-radius: 6px; }
.bulle .fermer:focus-visible { outline-offset: -3px; }
.bulle .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bulle .types { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; padding: 0; list-style: none; }
.bulle .types li, .types-txt { font-size: 13px; font-weight: 700; border: 1.5px solid var(--doux); border-radius: 6px; padding: 0 6px; }
.bulle .verrou { border-left: 4px solid var(--erreur); padding-left: 8px; }
.bulle .portrait { display: flex; align-items: center; gap: 6px; }
.bulle .portrait img { width: 64px; height: 64px; margin: -8px -6px; flex: none; }
.bulle .question { font-weight: 700; }

/* ---- téléphone : menu en tiroir par-dessus la carte ---- */
@media (max-width: 759px) {
  #carte-app, #carte-app.menu-cache { grid-template-columns: minmax(0, 1fr); }
  .menu { position: fixed; inset: 0 auto 0 0; width: min(360px, calc(100vw - 40px)); box-shadow: 4px 0 0 #1a1a1a, 0 0 0 100vmax rgba(0, 0, 0, .35); }
  .annonce { max-width: calc(100% - 90px); left: 12px; transform: none; bottom: 16px; }
  .outils-droite { bottom: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .f-vagues.a { animation: scintille 2.4s steps(1) infinite; }
  .f-vagues.b { animation: scintille 2.4s steps(1) infinite -1.2s; }
  @keyframes scintille { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
}

/* ---- le PC : Mon équipe + Mes Pokémon, dans la DA du menu PC de l'app (src/PcMenu.cs).
   Couleurs fixes dans les deux thèmes (c'est une « machine ») ; rouge des fonds avec texte foncé à #c93434 (AA). ---- */
.pc { --navy: #283870; --sky: #a8d0f0; --sky-l: #badcf6; --red: #c93434; --red-d: #961e28; --red-l: #f06e6e;
      --panel: #fafaf6; --edge: #6070a0; --shadow: #789ebe; --hi: #d0e8ff; --hi-edge: #78a8e0; --ink: #303038;
      --info: #5a6078;
      margin: 10px 8px; border: 3px solid var(--navy); border-radius: 8px; overflow: hidden; color: var(--ink);
      background: repeating-linear-gradient(135deg, var(--sky) 0 9px, var(--sky-l) 9px 12px); }
.pc :focus-visible { outline: 3px solid #1a5fb4; outline-offset: 1px; }
.pc-barre { margin: 0; background: var(--red); border-bottom: 3px solid var(--red-d); box-shadow: inset 0 2px 0 var(--red-l);
            color: #fff; font-weight: 700; font-size: 16px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
.pc-barre img { width: 24px; height: 24px; image-rendering: pixelated; }
.pc-barre .compte-n { margin-left: auto; font-weight: 700; font-size: 14px; }
.pc-barre:focus { outline: none; }
.pc-corps { padding: 8px; display: grid; gap: 10px; }
.pc .boite { background: var(--panel); border: 2px solid var(--edge); border-radius: 4px; box-shadow: 3px 3px 0 var(--shadow);
             padding: 6px; min-width: 0; }
.pc img.s { image-rendering: pixelated; image-rendering: crisp-edges; object-fit: contain; pointer-events: none; }
.pc button { font: inherit; color: var(--ink); cursor: pointer; }
.pc-vide { margin: 4px; color: var(--info); font-size: 14px; }
/* équipe : 6 vignettes 3 × 2 (fond ciel + herbe, comme la fiche de l'app) */
.eq-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vignette { border: 2px solid var(--edge); border-radius: 4px; background: linear-gradient(#e0f0fc 0 70%, #c8e8b8 70%);
            height: 88px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
            padding: 0 2px 3px; min-width: 0; }
.vignette img { width: 52px; height: 52px; }
.vignette b { font-size: 12px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vignette .nv { position: absolute; top: 2px; right: 4px; font-size: 11px; color: var(--info); font-weight: 600; }
.vignette .chef { position: absolute; top: 3px; left: 3px; font-size: 10px; font-weight: 700; color: #fff; background: var(--red);
                  border-radius: 3px; padding: 0 4px; }
.vignette.sel { border-color: var(--red); box-shadow: 0 0 0 2px var(--hi-edge); }
.vignette.vide { background: #eef2f8; border-style: dashed; color: var(--info); font-size: 13px; font-style: italic;
                 justify-content: center; }
.etoile { color: #a07800; }
/* boîte : grille de sprites */
.pc-filtre { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--info); margin-bottom: 4px; }
.pc-filtre select { flex: 1 1 auto; background: #fff; color: var(--ink); border: 2px solid var(--edge); border-radius: 4px; }
.nav { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.fleche { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--red) !important; font-size: 18px; border-radius: 4px; }
.fleche:disabled { color: #a0a4b4 !important; cursor: default; }
.grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.casier { aspect-ratio: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0;
        border: 2px solid transparent; border-radius: 3px; background: none; position: relative; }
.casier img { width: 100%; height: 100%; }
.casier:hover { background: var(--hi); }
.casier.sel { background: var(--hi); border-color: var(--hi-edge); }
.casier.dans::before { content: ""; position: absolute; left: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%;
                     background: var(--red); border: 1px solid #fff; }
.casier .etoile { position: absolute; right: 1px; bottom: -1px; font-size: 11px; }
.dragging { opacity: .5; }
.survol-dnd { outline: 3px dashed #1a5fb4; outline-offset: -3px; }
/* ligne d'info du Pokémon choisi et boutons de l'app */
.pc .info { margin-top: 6px; padding-top: 6px; border-top: 2px solid var(--sky); font-size: 14px; }
.info-texte { margin: 0 0 6px; overflow-wrap: anywhere; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-btn { min-height: 44px; padding: 4px 12px; border-radius: 4px; font-weight: 700; background: var(--red); color: #fff !important;
          border: 2px solid var(--red-d); box-shadow: inset 0 2px 0 var(--red-l); }
.pc-btn.gris { background: #e8eef8; color: var(--ink) !important; border-color: var(--edge); box-shadow: none; }
.pc-btn:disabled { background: #e8eef8; color: #5a6078 !important; border-color: #a0a4b4; box-shadow: none; cursor: default; }
.renommer { display: grid; gap: 4px; }
.renommer label { font-weight: 700; }
.renommer input { background: #fff; color: var(--ink); border: 2px solid var(--edge); }
.pc-aide { color: var(--info); font-size: 13px; }

/* ---- onglets Classement, Joueurs, Mon profil : la page du site (iframe) à la place des sections du menu ---- */
.menu.en-onglet { overflow: hidden; }
.menu.en-onglet .mentions { display: none; }
.onglet { flex: 1 1 auto; min-height: 0; display: flex; }
.onglet iframe { flex: 1; width: 100%; border: 0; background: transparent; }

/* ---- DA « jeu vidéo » de tout le menu, reprise du PC (src/PcMenu.cs) : fond ciel rayé, sections en cartes à barre
   rouge, panneaux blancs à ombre décalée. Couleurs fixes dans les deux thèmes, comme le PC. ---- */
.menu { --navy: #283870; --sky: #a8d0f0; --sky-l: #badcf6; --red: #c93434; --red-d: #961e28; --red-l: #f06e6e;
        --panel: #fafaf6; --edge: #6070a0; --shadow: #789ebe; --ink: #303038; --info: #5a6078;
        --encre: var(--ink); --doux: var(--info); --ligne: #c8d4e8; --papier: var(--panel); --focus: #1a5fb4;
        color: var(--ink); border-right-color: var(--navy);
        background: repeating-linear-gradient(135deg, var(--sky) 0 9px, var(--sky-l) 9px 12px); }
.menu-tete, .pages { background: var(--navy); color: #fff; }
.menu-tete { padding-bottom: 2px; }
.pages { border-bottom: 3px solid #1a2450; }
.pages a[aria-current] { text-decoration-color: var(--red-l); }
.menu-tete .icone-btn { background: var(--panel); border-color: #1a2450; color: var(--ink); }
.mentions { color: var(--ink); }
.carte-cnx { margin: 10px 8px 0; background: var(--panel); border: 2px solid var(--edge); border-radius: 4px;
             box-shadow: 3px 3px 0 var(--shadow); }
.sections { padding: 0 0 8px; }
.sections > details { margin: 10px 8px; border: 3px solid var(--navy); border-radius: 8px; overflow: hidden;
                      background: var(--panel); }
.sections > details > summary { background: var(--red); color: #fff; border-bottom: 3px solid transparent;
  box-shadow: inset 0 2px 0 var(--red-l); min-height: 44px; font-size: 16px; }
.sections > details[open] > summary { border-bottom-color: var(--red-d); }
.sections > details > summary::before { color: #fff; }
.sections > details > summary .compte-n { color: #fff; }
.sections > details > summary:focus-visible { outline-color: #fff; }
.sections > details > .corps { padding: 8px 10px 12px; }
.corps h3 { color: var(--navy); text-transform: uppercase; letter-spacing: .05em; font-size: 13px;
            border-bottom: 2px solid var(--sky); padding-bottom: 2px; }
.sections .btn { border-radius: 4px; }
.sections .btn.second { background: #e8eef8; color: var(--ink); border-color: var(--edge); }
select, input[type=text] { border-color: var(--edge); border-radius: 4px; }

/* raretés : ruban de couleur + cases teintées (gris, vert, bleu, violet doré), texte foncé ou blanc AA */
.rarete { --r: #6a7080; display: inline-block; color: #fff; background: var(--r); font-size: 12px; font-weight: 800;
          text-transform: uppercase; letter-spacing: .06em; padding: 1px 8px; border-radius: 3px;
          box-shadow: 2px 2px 0 rgba(0, 0, 0, .25); }
.corps p.rarete { margin: 10px 0 6px; font-weight: 800; }
.r-commun { --r: #5f6676; --r-l: #eef0f4; }
.r-peu-commun { --r: #2d7d3a; --r-l: #e3f4e2; }
.r-rare { --r: #2559b8; --r-l: #e0ebfc; }
.r-tres-rare { --r: #7a2fb0; --r-l: #f3e6fb; }
.sauvages { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.sauvages li { background: var(--r-l); border: 2px solid var(--r); border-radius: 4px; padding: 0 2px 4px;
               font-weight: 700; font-size: 12px; color: var(--ink); }
.sauvages.r-tres-rare li { box-shadow: 0 0 0 2px #e8b830, 0 0 8px #e8b830; }
.sauvages img { margin: -2px auto -6px; }

/* « Toutes les zones » : chaque zone est un encart cliquable (nom, infos, Pokémon les plus rares) */
.liste-zones li { display: block; padding: 0; border: 0; margin-top: 6px; }
.encart-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; width: 100%; min-height: 44px; padding: 6px 8px;
               font: inherit; text-align: left; color: var(--ink); cursor: pointer; background: #fff;
               border: 2px solid var(--edge); border-radius: 4px; box-shadow: 2px 2px 0 var(--shadow); }
.encart-zone:hover { background: #d0e8ff; border-color: #78a8e0; }
.encart-zone:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--shadow); }
.encart-zone .qui { flex: 1 1 100%; }
.rares-zone { display: flex; flex-wrap: wrap; gap: 2px; }
.rares-zone img { width: 40px; height: 40px; margin: -4px 0; background: var(--r-l); border: 2px solid var(--r);
                  border-radius: 4px; }
/* sur la carte : les plus rares en petit sous le nom de la zone */
.rares image { pointer-events: none; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }

/* ---- Boutique et échanges (feature boutique-echanges) : dans la DA du PC, à la place des sections du menu ---- */
.boutique { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pages .badge { margin-left: 4px; min-width: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff;
                font-size: 12px; line-height: 20px; text-align: center; }
.commandes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.commandes li { display: flex; flex-direction: column; align-items: center; font-size: 13px; text-align: center; min-width: 0; }
.commandes li b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commandes li small { color: var(--info); }
.commandes li.fini { opacity: .55; }
.liste-vente { list-style: none; margin: 0; display: grid; gap: 4px; }
.liste-vente li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 6px;
                  font-size: 14px; border-bottom: 1px solid var(--sky); padding-bottom: 4px; }
.liste-vente li.sel { background: var(--hi); }
.liste-vente li.confirme { display: block; background: var(--hi); padding: 6px; border-radius: 4px; }
.liste-vente .quoi { overflow-wrap: anywhere; }
.liste-vente .prix { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.commande { color: #a07800; font-weight: 700; }
.rachats { background: #fffaf0; border-color: #a07800; }
.objets-choix { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.objets-choix li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.objets-choix input { width: 72px; min-height: 36px; background: #fff; color: var(--ink);
                     border: 2px solid var(--edge); border-radius: 4px; }
.trop, .alerte { color: #b3261e; font-weight: 700; }
.objets { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.objet { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; }
.objet img { width: 64px; height: 64px; align-self: stretch; object-fit: contain; }
.objet .quoi { display: grid; font-size: 14px; }
.objet .quoi small { color: var(--info); font-size: 12px; }
.objet .quoi .possede { color: var(--ink); font-weight: 700; }
.objet .quoi .epuise { color: #b3261e; font-weight: 700; }
.objet .achat { display: grid; justify-items: end; gap: 3px; }
.objet .achat .prix { font-weight: 700; }
.objet .achat .pc-btn { min-height: 30px; padding: 1px 8px; font-size: 13px; }
.objet.sel { box-shadow: 0 0 0 2px var(--hi-edge); }
.objet .cible { grid-column: 1 / -1; }
.cible { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.cible select { min-height: 36px; background: #fff; color: var(--ink); border: 2px solid var(--edge); border-radius: 4px; }
/* ---- échanges façon échange Steam : deux dresseurs face à face, deux colonnes, balance ---- */
.sous-titre { margin: 4px 0; font-size: 14px; color: var(--navy); }
.offres { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.offre { background: var(--panel); border: 2px solid var(--edge); border-radius: 6px; box-shadow: 3px 3px 0 var(--shadow); padding: 6px; }
.offre.a-repondre { border-color: var(--red); }
.offre-tete { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; flex-wrap: wrap; }
.etat-offre { flex: none; white-space: nowrap; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 10px; background: #e8eef8; color: var(--ink); }
.etat-offre.attente { background: #fff1c2; color: #6b4e00; }
.etat-offre.accepted { background: #dff3dc; color: #1f5f1a; }
.etat-offre.refused, .etat-offre.failed, .etat-offre.expired, .etat-offre.cancelled { background: #f1e3e3; color: #7a2020; }
.offre-actions { margin-top: 6px; }
.troc { display: grid; gap: 6px; margin-top: 6px; }
.troc-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.troc-dresseur { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 13px; }
.troc-dresseur.lui { flex-direction: row-reverse; text-align: right; }
.troc-dresseur b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.troc-dresseur img { width: 40px; height: 40px; flex: none; }
.troc-fleche { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff;
               font-weight: 700; font-size: 16px; }
.troc-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.troc-cote { background: #fff; border: 2px solid var(--edge); border-radius: 4px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.troc-titre { margin: 0; padding: 3px 6px; font-size: 12px; font-weight: 700; color: #fff; background: var(--navy);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.troc-cote.lui .troc-titre { background: var(--red); }
.troc-tuiles { list-style: none; margin: 0; padding: 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.troc-tuiles li { min-width: 0; }
.emplacement { border: 2px dashed #c8d4e8; border-radius: 4px; min-height: 76px; }
.troc-aide { margin: 0 6px 4px; font-size: 11px; color: var(--info); }
.troc-total { margin: auto 0 0; display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-top: 2px solid var(--sky);
              font-size: 12px; color: var(--info); }
.troc-total b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.tuile { position: relative; width: 100%; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
         padding: 14px 2px 3px; border: 2px solid var(--sky); border-radius: 4px; background: linear-gradient(#e0f0fc 0 62%, #c8e8b8 62%);
         font-size: 11px; line-height: 1.2; text-align: center; color: var(--ink); }
.tuile.chroma { border-color: #d4a017; }
.tuile img { width: 40px; height: 40px; }
.tuile-nom { max-width: 100%; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuile-bas { color: var(--info); font-variant-numeric: tabular-nums; }
.tuile-coin { position: absolute; top: 2px; left: 3px; font-size: 10px; font-weight: 700; color: var(--info); }
.tuile-signe { position: absolute; top: 1px; right: 2px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
               font-size: 12px; font-weight: 700; color: #fff; line-height: 1; }
.tuile-signe.plus { background: var(--navy); }
.tuile-signe.moins { background: var(--red); }
button.tuile { cursor: pointer; }
button.tuile:hover, button.tuile:focus-visible { border-color: var(--hi-edge); background: linear-gradient(#d0e8ff 0 62%, #bde0a8 62%); }
.troc-balance { display: grid; gap: 2px; font-size: 12px; font-weight: 700; text-align: center; }
.troc-balance p { margin: 0; }
.troc-balance .barre { display: flex; height: 8px; border-radius: 4px; overflow: hidden; border: 1px solid var(--edge); }
.troc-balance .barre .g { background: var(--navy); }
.troc-balance .barre .d { background: var(--red); }
.troc-balance.ok p { color: #1f6f1a; }
.troc-balance.plus p { color: #1f6f1a; }
.troc-balance.moins p { color: #8a5a00; }
.troc-balance.alerte p { color: #b3261e; }
.troc-balance.vide p { color: var(--info); font-weight: 600; }
.composer { display: grid; gap: 8px; }
.inventaire { background: var(--panel); border: 2px solid var(--edge); border-radius: 4px; overflow: hidden; }
.inv-onglets { display: grid; grid-template-columns: 1fr 1fr; }
.inv-onglet { min-height: 40px; border: 0; border-bottom: 2px solid var(--edge); background: #e8eef8; font-weight: 700; font-size: 13px;
              color: var(--info); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
.inv-onglet.actif { background: var(--panel); color: var(--ink); border-bottom-color: transparent; box-shadow: inset 0 3px 0 var(--red); }
.inv-onglet + .inv-onglet { border-left: 2px solid var(--edge); }
.inv-corps { padding: 6px; display: grid; gap: 6px; }
.inv-grille { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); padding: 0; }
.montant { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; }
.montant input { width: 90px; min-height: 36px; margin-left: auto; background: #fff; color: var(--ink); border: 2px solid var(--edge); border-radius: 4px; }
.composer-actions .pc-btn:first-child { flex: 1; }
/* nouvel échange : choisir le joueur */
.recherche-joueur { display: grid; gap: 6px; }
.recherche-joueur input { min-height: 40px; padding: 0 8px; background: #fff; color: var(--ink); border: 2px solid var(--edge); border-radius: 4px; font: inherit; }
.joueurs-choix { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.joueur-choix { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 8px;
                background: var(--panel); border: 2px solid var(--edge); border-radius: 4px; text-align: left; cursor: pointer; color: var(--ink); }
.joueur-choix:hover, .joueur-choix:focus-visible { border-color: var(--hi-edge); background: var(--hi); }
.joueur-choix span { display: grid; min-width: 0; }
.joueur-choix b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joueur-choix small { color: var(--info); font-size: 12px; }
.joueur-go { font-size: 20px; font-weight: 700; color: var(--red); }