/* Pokémon DUO : le site (accueil, wiki, téléchargement, Pokédex) et les comptes des joueurs.
   (v4, 03/11/2026) Direction artistique : sombre, typographie forte, UNE couleur d'accent (le vert émeraude), grille
   de 12 colonnes, traits fins. Inter Tight pour tout le texte (grotesque serrée, titres très gras), JetBrains Mono
   pour les petites étiquettes (menu, fil, dates, en-têtes de tableau), Pixelify Sans pour la boîte de dialogue de
   l'entrée. Le mouvement : transform et opacity seulement, rien sous prefers-reduced-motion.
   Aucun script dans les pages, rien d'extérieur : polices et images viennent du site (CSP : style-src, img-src,
   font-src 'self'). */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/polices/inter-tight.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/polices/jetbrains-mono.woff2") format("woff2");
}
@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/polices/pixelify-sans.woff2") format("woff2");
}

:root {
  /* couleurs : fonds presque noirs (une pointe de vert), texte clair, l'émeraude pour l'action et le lieu actif.
     Contrastes sur --fond : --encre 17:1, --doux 8:1, --pale 5:1, --emeraude 9:1 (AA partout). */
  --fond: #0a0c0b;
  --fond-2: #0f1210;
  --surface: #141815;
  --surface-2: #1b201c;
  --trait: #252b27;
  --trait-fort: #38403a;
  --encre: #eef2ef;
  --doux: #a5afa9;
  --pale: #7f8a83;
  --emeraude: #50c878;
  --emeraude-vif: #74dc96;
  --emeraude-voile: rgba(80, 200, 120, .12);
  --sur-emeraude: #04140a;
  --alerte: #f0b35a;
  --alerte-voile: rgba(240, 179, 90, .1);
  --danger: #ff7a7a;
  --danger-voile: rgba(255, 122, 122, .1);
  --ombre: 0 24px 60px rgba(0, 0, 0, .55);

  --texte: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --pixel: "Pixelify Sans", var(--mono);
  --t-2: .75rem;     /* 12 */
  --t-1: .875rem;    /* 14 */
  --t0: 1.0625rem;   /* 17 */
  --t1: 1.25rem;     /* 20 */
  --t2: 1.625rem;    /* 26 */
  --t3: 2.125rem;    /* 34 */
  --t4: 2.75rem;     /* 44 */
  --t5: clamp(2.75rem, 6vw, 5rem);

  --e0: 4px;
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 32px;
  --e5: 48px;
  --e6: 64px;
  --e7: 96px;
  --r: 6px;
  --largeur: 1376px;
  --lecture: 46rem;
  --gouttiere: max(16px, env(safe-area-inset-left, 0px));
  --gouttiere-d: max(16px, env(safe-area-inset-right, 0px));
  --sortie: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
@media (min-width: 720px) {
  :root { --gouttiere: max(32px, env(safe-area-inset-left, 0px)); --gouttiere-d: max(32px, env(safe-area-inset-right, 0px)); }
}

/* ------------------------------------------------------------ base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fond); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--encre);
  font: 400 var(--t0)/1.65 var(--texte);
  font-feature-settings: "case" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
main { flex: 1 0 auto; }
::selection { background: var(--emeraude); color: var(--sur-emeraude); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--emeraude); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--emeraude-vif); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--emeraude); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--texte); font-weight: 750; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; margin: 0; }
h1 { font-size: var(--t5); font-weight: 800; letter-spacing: -.045em; line-height: .95; }
h2 { font-size: var(--t3); }
h3 { font-size: var(--t1); letter-spacing: -.015em; }
h4 { font-size: var(--t0); }
p, ul, ol, dl, figure, pre { margin: 0; }
ul, ol { padding-left: 1.25em; }
code, kbd, pre { font-family: var(--mono); font-size: .84em; }
code { background: var(--surface-2); border: 1px solid var(--trait); border-radius: 4px; padding: .05em .35em; overflow-wrap: anywhere; }
kbd {
  display: inline-block;
  min-width: 1.9em;
  padding: .05em .45em;
  border: 1px solid var(--trait-fort);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--encre);
  text-align: center;
  white-space: nowrap;
}
.discret { color: var(--doux); }
/* les petites étiquettes : la police mono, en capitales */
.surtitre, .fil, .sommaire-titre, .sommaire h4, th, .versions .date, .fiche dt, .suite a small, .pied h4, .index-wiki h2,
.atouts-titre, .une-meta, .decor, .menu a, .bouton.petit, .filtres .compte {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-2);
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.surtitre { display: inline-flex; align-items: center; gap: var(--e1); color: var(--emeraude); }
.conteneur {
  max-width: calc(var(--largeur) + 64px);
  margin: 0 auto;
  padding-left: var(--gouttiere);
  padding-right: var(--gouttiere-d);
}
.saut {
  position: absolute;
  left: var(--e2);
  top: -64px;
  z-index: 30;
  background: var(--emeraude);
  color: var(--sur-emeraude);
  padding: var(--e1) var(--e2);
  border-radius: var(--r);
  font-weight: 700;
  text-decoration: none;
}
.saut:focus { top: var(--e1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* La marque : deux ronds qui se chevauchent, les deux joueurs (un plein, un cerclé), puis le nom. */
.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--encre);
  text-decoration: none;
  font: 700 1rem/1 var(--texte);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.marque:hover { color: var(--encre); }
.marque b { font-weight: 800; }
.pastilles { position: relative; flex: none; width: 26px; height: 16px; }
.pastilles::before, .pastilles::after {
  content: "";
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.pastilles::before { left: 0; background: var(--emeraude); }
.pastilles::after { left: 10px; border: 2px solid var(--encre); }
.marque:hover .pastilles::after { transform: translateX(-3px); }
.pastilles::after { transition: transform .3s var(--sortie); }

/* ------------------------------------------------------------ haut de page */
.haut {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 12, 11, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--trait);
}
.haut-in {
  max-width: calc(var(--largeur) + 64px);
  margin: 0 auto;
  padding-left: var(--gouttiere);
  padding-right: var(--gouttiere-d);
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: var(--e5);
}
.menu { display: flex; gap: var(--e4); }
.menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 20px;
  color: var(--doux);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.menu a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emeraude);
  transform: scale(0);
  transition: transform .25s var(--sortie);
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--encre); }
.menu a:hover::before, .menu a[aria-current="page"]::before { transform: scale(1); }
.zone-compte { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }
.sortie { display: inline; }
.zone-compte .lien { font-family: var(--mono); font-size: var(--t-2); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

/* ------------------------------------------------------------ boutons */
.bouton {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 var(--e3);
  border: 1px solid var(--emeraude);
  border-radius: var(--r);
  background: var(--emeraude);
  color: var(--sur-emeraude);
  font: 700 var(--t0)/1 var(--texte);
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--sortie);
}
/* au survol, un voile clair monte du bas (transform) ; la flèche avance */
.bouton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--emeraude-vif);
  transform: translateY(101%);
  transition: transform .35s var(--sortie);
}
.bouton:hover { color: var(--sur-emeraude); }
.bouton:hover::before { transform: none; }
.bouton:active { transform: scale(.97); transition-duration: .08s; }
.bouton svg { width: 20px; height: 20px; flex: none; transition: transform .35s var(--sortie); }
.bouton:hover svg { transform: translateX(4px); }
.bouton.grand { min-height: 56px; padding: 0 var(--e4); font-size: var(--t1); }
.bouton.petit { min-height: 32px; padding: 0 12px; color: var(--encre); }
.bouton.second { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
.bouton.second::before { background: var(--surface-2); }
.bouton.second:hover { color: var(--encre); border-color: var(--doux); }
.bouton.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.bouton.danger::before { background: var(--danger-voile); }
.bouton.danger:hover { color: var(--danger); }
.lien {
  background: none;
  border: 0;
  padding: 0;
  color: var(--encre);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--emeraude);
  text-underline-offset: .22em;
  cursor: pointer;
}
.lien:hover { color: var(--emeraude-vif); text-decoration-thickness: 2px; }
.actions, .boutons { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }

/* ------------------------------------------------------------ cadres de page */
main.site { display: block; }
main.etroit {
  width: 100%;
  max-width: calc(520px + 32px);
  margin: 0 auto;
  padding: var(--e6) var(--gouttiere-d) var(--e7) var(--gouttiere);
  display: grid;
  align-content: start;
  gap: var(--e3);
}
main.large {
  width: 100%;
  max-width: calc(var(--largeur) + 64px);
  margin: 0 auto;
  padding: var(--e5) var(--gouttiere-d) var(--e7) var(--gouttiere);
  display: grid;
  align-content: start;
  gap: var(--e3);
}
.chapeau { font-size: var(--t1); line-height: 1.5; color: var(--doux); }
/* captures du jeu : toujours au ratio de la zone de jeu (16:9), un trait fin autour */
.ecran {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--surface);
  outline: 1px solid var(--trait);
  outline-offset: -1px;
}

/* ------------------------------------------------------------ l'accueil (v4) : un seul écran */
/* Le nom en très gros, une ligne, un bouton ; à droite ce que DUO ajoute, en grosses lignes. Pas d'image : les
   captures viennent en aperçu qui suit la souris (site.js, .apercu plus bas). */
.accueil main { display: flex; }
.une {
  position: relative;
  flex: 1;
  display: flex;
  min-height: calc(100svh - 61px - 72px);
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}
/* une lueur émeraude très douce, en bas à droite, et une grille de traits presque invisible */
.une::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 92% 108%, rgba(80, 200, 120, .16), transparent 70%),
    radial-gradient(40% 40% at 6% -10%, rgba(80, 200, 120, .06), transparent 70%);
}
.une::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to right, rgba(238, 242, 239, .035) 1px, transparent 1px);
  background-size: calc((100% - 64px) / 12) 100%;
  background-position: 32px 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.une-in {
  width: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  padding-block: var(--e4) var(--e5);
}
.une-meta { display: flex; justify-content: space-between; gap: var(--e2); color: var(--pale); }
.une-titre {
  margin: clamp(8px, 4vh, 48px) 0 0 -.04em;
  font-size: clamp(4.25rem, 15.4vw, 15.5rem);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.06em;
  white-space: nowrap;
}
.une-titre > * { display: inline-block; }
.une-titre em { font-style: normal; color: var(--emeraude); }
.une-bas {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--e4);
  align-items: end;
  padding-top: clamp(24px, 6vh, 72px);
}
.une-gauche { grid-column: 1 / span 4; display: grid; gap: var(--e3); justify-items: start; padding-bottom: 6px; }
.une-phrase { font-size: clamp(1.375rem, 2vw, 1.875rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.atouts { grid-column: 6 / -1; }
.atouts-titre { color: var(--pale); margin-bottom: var(--e2); }
.atouts ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; column-gap: .32em; }
.atouts li {
  font-size: clamp(1.75rem, 3.7vw, 3.5rem);
  word-spacing: .1em;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.atouts li:not(:last-child)::after { content: "/"; margin-left: .32em; color: var(--trait-fort); font-weight: 400; }
.atouts a {
  display: inline-block;
  color: var(--encre);
  text-decoration: none;
  transition: color .25s, opacity .3s, transform .4s var(--sortie);
}
.atouts a:hover, .atouts a:focus-visible { color: var(--emeraude); }
/* survol d'une ligne : les autres s'effacent (seulement avec une souris) */
@media (hover: hover) and (pointer: fine) {
  .atouts ul:hover a:not(:hover) { opacity: .28; }
}
/* l'aperçu qui suit la souris (créé par site.js ; jamais sans souris) */
.apercu {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 15;
  pointer-events: none;
  will-change: transform;
}
.apercu-cadre {
  width: min(30vw, 440px);
  transform: translate(-50%, calc(-100% - 28px)) scale(.86);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: opacity .25s, transform .45s var(--sortie);
}
.apercu.vu .apercu-cadre { opacity: 1; transform: translate(-50%, calc(-100% - 28px)) scale(1); }
.apercu img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--ombre); outline: 1px solid rgba(238, 242, 239, .14); outline-offset: -1px; }
.apercu[data-genre="capture"] img { aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface); }
.apercu[data-genre="rendu"] .apercu-cadre { width: 240px; }
.apercu[data-genre="rendu"] img { aspect-ratio: 1; object-fit: contain; padding: 24px;
  background: radial-gradient(circle at 50% 60%, rgba(80, 200, 120, .28), var(--surface) 70%); }
.apercu[data-genre="carte"] .apercu-cadre { width: 200px; }
.apercu[data-genre="carte"] img { outline: 0; border-radius: 10px; }

/* l'entrée (une fois par visite, site.js) : une boîte de dialogue façon GBA, puis « Appuie sur START » */
.entree {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e5);
  padding: var(--e2);
  background: var(--fond);
  cursor: pointer;
  transition: opacity .45s, transform .6s var(--sortie);
}
.entree[hidden] { display: none; }
.entree.sort { opacity: 0; transform: scale(1.04); pointer-events: none; }
.entree-boite {
  position: relative;
  width: min(640px, calc(100vw - 32px));
  min-height: 7.6em;
  padding: 18px 26px 26px;
  border: 4px solid #2a302c;
  border-radius: 12px;
  background: #f6f7f1;
  box-shadow: inset 0 0 0 3px #f6f7f1, inset 0 0 0 6px #6ba889, 0 0 0 2px #5b625d, 0 30px 80px rgba(0, 0, 0, .6);
  color: #3a3a3a;
  font: 500 clamp(1.125rem, 2.6vw, 1.5rem)/1.55 var(--pixel);
  letter-spacing: .02em;
  text-shadow: 2px 2px 0 #d3d6cd;
}
.entree-texte { min-height: 3.1em; }
.entree-fleche {
  position: absolute;
  right: 22px;
  bottom: 14px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #3a3a3a;
  opacity: 0;
}
.entree-start { font: 500 clamp(1rem, 2vw, 1.25rem)/1 var(--pixel); letter-spacing: .18em; text-transform: uppercase; color: var(--emeraude); opacity: 0; }
.entree.pret .entree-fleche, .entree.pret .entree-start { opacity: 1; }

/* ------------------------------------------------------------ wiki */
.wiki {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--e6);
  padding-block: var(--e5) var(--e7);
}
.sommaire-large { position: sticky; top: calc(61px + var(--e4)); display: grid; gap: var(--e1); max-height: calc(100vh - 61px - 64px); overflow: auto; scrollbar-width: thin; }
.sommaire-titre { color: var(--pale); padding-left: 12px; }
.sommaire nav { display: grid; gap: 1px; }
.sommaire h4 { color: var(--pale); margin: var(--e3) 0 var(--e1); padding-left: 12px; }
.sommaire a {
  display: block;
  padding: 5px 12px;
  border-left: 2px solid transparent;
  color: var(--doux);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
  transition: color .2s, border-color .2s;
}
.sommaire a:hover { color: var(--encre); border-left-color: var(--trait-fort); }
.sommaire a[aria-current="page"] { color: var(--encre); font-weight: 650; border-left-color: var(--emeraude); }
.sommaire-tel { display: none; }
.sommaire summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 var(--e2);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  background: var(--surface);
  font-weight: 650;
}
.sommaire summary::-webkit-details-marker { display: none; }
.sommaire summary::after { content: "+"; font-size: var(--t1); color: var(--emeraude); }
.sommaire details[open] summary::after { content: "–"; }
.sommaire details nav { padding: var(--e1) 0; }
.article { min-width: 0; max-width: var(--lecture); }
.article.index, .article.pokemon { max-width: 60rem; }
.entete-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "titre image" "resume image";
  column-gap: var(--e4);
  row-gap: var(--e2);
  align-items: end;
  padding-bottom: var(--e4);
  margin-bottom: var(--e5);
  border-bottom: 1px solid var(--trait);
}
.entete-article .titre { grid-area: titre; display: grid; gap: var(--e2); }
.entete-article > .portrait { grid-area: image; align-self: end; }
.entete-article > p { grid-area: resume; }
.entete-article p { font-size: var(--t1); line-height: 1.5; color: var(--doux); max-width: 40rem; }
.fil { color: var(--pale); }
.fil a { color: var(--doux); text-decoration: none; }
.fil a:hover { color: var(--emeraude); }

/* le corps des pages : texte courant */
.texte { display: grid; gap: var(--e2); }
.texte > * { min-width: 0; }
.texte > h2 { font-size: var(--t2); margin-top: var(--e5); padding-top: var(--e3); border-top: 1px solid var(--trait); }
.texte > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.texte h3 { font-size: var(--t1); margin-top: var(--e2); }
.texte li + li { margin-top: var(--e1); }
.texte li::marker { color: var(--pale); }
.texte strong { font-weight: 700; color: var(--encre); }
.texte figure { display: grid; gap: var(--e1); margin-block: var(--e1); }
.texte figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r);
  outline: 1px solid var(--trait); outline-offset: -1px; background: var(--surface); }
.texte figcaption, .galerie figcaption { font-family: var(--mono); font-size: var(--t-2); letter-spacing: .04em; color: var(--pale); }
.etapes { padding-left: 0; list-style: none; counter-reset: etape; display: grid; gap: var(--e2); }
.etapes li { counter-increment: etape; position: relative; padding-left: 44px; min-height: 28px; }
.texte .etapes li + li { margin-top: 0; }
.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .2em;
  font: 500 var(--t-1)/1.2 var(--mono);
  color: var(--emeraude);
}
.encadre {
  display: grid;
  gap: var(--e1);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--trait);
  border-left: 2px solid var(--trait-fort);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--fond-2);
}
.encadre > b:first-child { font-weight: 700; }
.encadre.astuce { border-left-color: var(--emeraude); background: linear-gradient(90deg, var(--emeraude-voile), transparent 60%), var(--fond-2); }
.encadre.astuce > b:first-child { color: var(--emeraude); }
.encadre.attention { border-left-color: var(--alerte); background: linear-gradient(90deg, var(--alerte-voile), transparent 60%), var(--fond-2); }
.encadre.attention > b:first-child { color: var(--alerte); }
.encadre.prevu { border-style: dashed; border-left-style: solid; }
.encadre.prevu > b:first-child { color: var(--doux); font: 500 var(--t-2)/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.tableau { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--r); background: var(--fond-2); }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { text-align: left; vertical-align: top; padding: 11px var(--e2); border-bottom: 1px solid var(--trait); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
th { color: var(--pale); background: var(--surface); white-space: nowrap; }
tbody th { background: transparent; }
.touches td:first-child { font-weight: 700; white-space: nowrap; }
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e4); }
.tuile { display: grid; gap: var(--e0); padding: var(--e2) 0; border-top: 1px solid var(--trait); }
.tuile > div { display: grid; gap: var(--e0); }
.tuile b { font-size: var(--t1); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.tuile span { color: var(--doux); font-size: .9375rem; }
.faq { display: grid; border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e2) 0;
  font-weight: 650;
  transition: color .2s;
}
.faq summary:hover { color: var(--emeraude-vif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--t1); line-height: 1; color: var(--emeraude); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { display: grid; gap: var(--e1); padding-bottom: var(--e3); color: var(--doux); }
.versions { list-style: none; padding: 0; display: grid; }
.versions > li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--e3); padding: var(--e3) 0; border-top: 1px solid var(--trait); }
.texte .versions > li + li { margin-top: 0; }
.versions > li > b { font-size: var(--t3); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--emeraude); font-variant-numeric: tabular-nums; }
.versions .date { display: block; color: var(--pale); margin-bottom: var(--e1); }
.versions ul { padding-left: 1.1em; color: var(--doux); }
.versions li li + li { margin-top: var(--e0); }
.suite {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
  margin-top: var(--e6);
  padding-top: var(--e3);
  border-top: 1px solid var(--trait);
}
.suite a { display: grid; gap: 6px; font-size: var(--t2); font-weight: 750; letter-spacing: -.025em; line-height: 1.15; text-decoration: none; color: var(--encre); transition: color .2s; }
.suite a:hover { color: var(--emeraude); }
.suite a small { color: var(--pale); }
.suite a.apres { text-align: right; grid-column: 2; }

/* index du wiki : de grosses lignes, comme l'accueil */
.index-wiki { display: grid; gap: var(--e6); }
.index-wiki h2 { color: var(--pale); padding-bottom: var(--e2); }
.lignes { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--trait); }
.lignes a {
  display: grid;
  grid-template-columns: 80px minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--e3);
  align-items: center;
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--trait);
  color: var(--encre);
  text-decoration: none;
  height: 100%;
}
.lignes a > div { display: contents; }
.lignes b { display: block; font-size: var(--t2); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; transition: color .2s, transform .45s var(--sortie); }
.lignes span { font-size: .9375rem; color: var(--doux); line-height: 1.45; }
.lignes a:hover b { color: var(--emeraude); transform: translateX(6px); }
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4) var(--e3); margin-top: var(--e3); }
.galerie figure { display: grid; gap: 10px; }
.galerie .ecran { transition: transform .8s var(--sortie); }
.galerie figure:hover .ecran { transform: scale(1.02); }
#images > .discret { margin-top: calc(-1 * var(--e1)); }

/* ------------------------------------------------------------ télécharger */
.entete-dl {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e6);
  align-items: center;
  padding-block: var(--e6);
}
.entete-dl > div { display: grid; gap: var(--e3); justify-items: start; }
.entete-dl h1 { font-size: clamp(3rem, 6vw, 5.5rem); }
.fiche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); width: 100%; padding-top: var(--e3); border-top: 1px solid var(--trait); }
.fiche div { display: grid; gap: var(--e0); }
.fiche dt { color: var(--pale); }
.fiche dd { margin: 0; font-weight: 650; }
.entete-dl .ecran { box-shadow: var(--ombre); }
.corps-dl { display: grid; grid-template-columns: 232px minmax(0, var(--lecture)); gap: var(--e6); padding-bottom: var(--e7); }
.sur-page { display: grid; gap: var(--e1); align-content: start; position: sticky; top: calc(61px + var(--e4)); }
.sur-page nav { display: grid; gap: 1px; }
.sur-page nav a { padding: 5px 12px; border-left: 2px solid var(--trait); color: var(--doux); font-size: .9375rem; text-decoration: none; }
.sur-page nav a:hover { color: var(--encre); border-left-color: var(--emeraude); }
.sur-page .discret { padding: var(--e2) 12px 0; font-size: var(--t-1); }

/* ------------------------------------------------------------ comptes : formulaires */
.decor { color: var(--pale); display: flex; align-items: center; gap: 10px; }
.decor::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--emeraude); }
.carte {
  display: grid;
  gap: var(--e2);
  padding: var(--e4);
  background: var(--fond-2);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  min-width: 0;
}
.carte h1 { font-size: var(--t4); letter-spacing: -.04em; line-height: 1; }
.carte h2 { font-size: var(--t1); }
.carte > h2:not(:first-child) { margin-top: var(--e2); }
.carte.important { border-color: var(--emeraude); box-shadow: inset 0 0 0 1px var(--emeraude); }
.carte .bas { padding-top: var(--e2); border-top: 1px solid var(--trait); color: var(--doux); }
form { display: grid; gap: var(--e3); }
form.ligne, form.sortie { display: inline; }
form.ligne .champ, form.ligne .boutons { margin-bottom: var(--e2); }
.champ { display: grid; gap: 6px; }
.champ > span { font-weight: 650; font-size: var(--t-1); }
.champ small { color: var(--doux); font-size: var(--t-1); line-height: 1.45; }
input[type=text], input[type=password], input[type=number], input[type=search], select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--e2);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
  background: var(--fond);
  color: var(--encre);
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input[type=text]:hover, input[type=password]:hover, input[type=number]:hover, input[type=search]:hover, select:hover { border-color: var(--doux); }
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=search]:focus, select:focus {
  outline: none;
  border-color: var(--emeraude);
  box-shadow: 0 0 0 3px var(--emeraude-voile);
}
input[type=radio], input[type=checkbox] { accent-color: var(--emeraude); width: 18px; height: 18px; }
fieldset { border: 1px solid var(--trait); border-radius: var(--r); padding: var(--e2); margin: 0; display: grid; gap: var(--e1); }
legend { font-weight: 650; padding: 0 var(--e1); }
.choix { display: flex; align-items: center; gap: var(--e1); }
fieldset .champ { margin-left: 26px; }
form .bouton { justify-self: start; }
.boite { margin: 0; padding: 12px var(--e2); border-radius: var(--r); font-weight: 600; border: 1px solid; }
.boite.erreur { background: var(--danger-voile); color: var(--danger); }
.boite.ok { background: var(--emeraude-voile); color: var(--emeraude-vif); }
.boite.attention { background: var(--alerte-voile); color: var(--alerte); }
.infos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e1) var(--e3); }
.infos dt { color: var(--doux); }
.infos dd { margin: 0; font-weight: 650; }
.parties { list-style: none; padding: 0; display: grid; }
.parties li { padding: 12px 0; border-bottom: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: var(--e1); align-items: baseline; }
.parties li:last-child { border-bottom: 0; }
.parties .ligne { margin-left: auto; }
.secret {
  padding: var(--e2);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
  background: var(--fond);
  color: var(--emeraude-vif);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}
.journal { list-style: none; padding: 0; display: grid; gap: var(--e0); font-size: .9375rem; }
.grille { display: grid; gap: var(--e2); }
main.large > h1 { font-size: var(--t4); }

/* ------------------------------------------------------------ pied de page */
.pied { border-top: 1px solid var(--trait); color: var(--doux); background: var(--fond); }
.pied-in {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e5) var(--e4);
  padding-block: var(--e6) var(--e5);
}
.pied-in > div { display: grid; gap: var(--e2); align-content: start; }
.pied p { font-size: .9375rem; max-width: 26rem; }
.pied h4 { color: var(--pale); }
.pied ul { list-style: none; padding: 0; display: grid; gap: var(--e1); }
.pied a { color: var(--doux); text-decoration: none; }
.pied a:hover { color: var(--encre); }
.mention { grid-column: 1 / -1; padding-top: var(--e3); border-top: 1px solid var(--trait); font-family: var(--mono); font-size: 11px; line-height: 1.6; letter-spacing: .02em; color: var(--pale); }
.pied .mention { max-width: none; font-size: 11px; }
.pied .mention a { color: var(--doux); text-decoration: underline; text-decoration-color: var(--trait-fort); }
.pied.court .pied-in { display: block; padding-block: var(--e2); }
.pied.court .mention { padding-top: 0; border-top: 0; }

/* ------------------------------------------------------------ le Pokédex (03/11/2026, site_pokedex.py) */
.pixel { image-rendering: pixelated; }

/* Les Pokémon (03/11/2026, retour de Thomas : « les images ressortent trop ») : partout le même dessin du jeu
   (img/dex, 64 px) à l'échelle entière (64 ou 128, sans lissage), posé sur un socle : une carte sombre, un trait fin,
   un halo émeraude très doux à ses pieds, une ombre discrète. Au repos le dessin est un peu éteint (saturation et
   lumière baissées) ; au survol (ou au focus du lien) il reprend toutes ses couleurs. Sous prefers-reduced-motion,
   le changement est immédiat (règle du bas). */
.portrait {
  --halo: rgba(80, 200, 120, .13);
  display: grid;
  place-items: center;
  justify-self: start;
  flex: none;
  padding: 8px;
  border-radius: var(--r);
  background:
    radial-gradient(70% 46% at 50% 92%, var(--halo), transparent 72%),
    linear-gradient(180deg, var(--surface) 0%, var(--fond-2) 100%);
  box-shadow: inset 0 0 0 1px var(--trait), 0 12px 28px rgba(0, 0, 0, .32);
  transition: box-shadow .35s var(--sortie);
}
.portrait img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  filter: saturate(.78) brightness(.9) drop-shadow(0 3px 2px rgba(0, 0, 0, .45));
  transition: filter .35s var(--sortie);
}
.portrait.grand { padding: 12px; }
.portrait.grand img { width: 128px; height: 128px; filter: saturate(.78) brightness(.9) drop-shadow(0 5px 3px rgba(0, 0, 0, .45)); }
.portrait.petit { padding: 0; box-shadow: inset 0 0 0 1px var(--trait); }
a:hover .portrait, a:focus-visible .portrait, .portrait:hover { --halo: rgba(80, 200, 120, .24); box-shadow: inset 0 0 0 1px var(--trait-fort), 0 12px 28px rgba(0, 0, 0, .32); }
a:hover .portrait img, a:focus-visible .portrait img, .portrait:hover img { filter: none; }
.portrait.petit:hover, a:hover .portrait.petit { box-shadow: inset 0 0 0 1px var(--trait-fort); }
.filtres {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
  gap: var(--e2);
  align-items: end;
  padding: var(--e2);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  background: var(--fond-2);
}
.filtres[hidden] { display: none; }
.filtres select { padding: 0 var(--e1); }
.filtres .compte { grid-column: 1 / -1; color: var(--doux); }
.dex {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: var(--e1);
}
.texte .dex li + li { margin-top: 0; }
.dex li[hidden] { display: none; }
.dex a {
  display: grid;
  justify-items: center;
  gap: 2px;
  height: 100%;
  padding: var(--e1) var(--e0) 12px;
  border: 1px solid var(--trait);
  border-radius: var(--r);
  background: radial-gradient(52px 22px at 50% 66px, rgba(80, 200, 120, .1), transparent 72%), var(--fond-2);
  color: var(--encre);
  text-decoration: none;
  text-align: center;
  transition: border-color .2s, transform .3s var(--sortie), background-color .2s;
}
.dex a:hover { border-color: var(--emeraude); background-color: var(--surface); transform: translateY(-3px); }
.dex img { width: 64px; height: 64px; image-rendering: pixelated; filter: saturate(.78) brightness(.9) drop-shadow(0 3px 2px rgba(0, 0, 0, .45)); transition: filter .3s var(--sortie); }
.dex a:hover img, .dex a:focus-visible img { filter: none; }
.dex small { font: 500 var(--t-2)/1.3 var(--mono); color: var(--pale); font-variant-numeric: tabular-nums; }
.dex b { font-size: .9375rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.dex a:hover b { color: var(--emeraude); }
.dex i { font-style: normal; font-size: var(--t-2); color: var(--doux); }
.stats th { width: 8rem; }
.stats td:nth-child(2) { width: 3.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stats meter { width: 100%; height: 8px; display: block; margin-top: 7px; border: 0; border-radius: 4px; background: var(--surface-2); }
.stats meter::-webkit-meter-bar { background: var(--surface-2); border: 0; border-radius: 4px; height: 8px; }
.stats meter::-webkit-meter-optimum-value, .stats meter::-webkit-meter-suboptimum-value,
.stats meter::-webkit-meter-even-less-good-value { background: var(--emeraude); border-radius: 4px; }
.stats meter::-moz-meter-bar { background: var(--emeraude); border-radius: 4px; }
.stats .total th, .stats .total td { font-weight: 700; color: var(--encre); }
.evos { list-style: none; padding: 0; display: grid; gap: var(--e1); }
.texte .evos li + li { margin-top: 0; }
.evos li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e0) var(--e1); }
.evo { display: inline-flex; align-items: center; gap: var(--e0); font-weight: 650; }
.evo .portrait { margin-block: 2px; margin-right: 6px; }
td small { font: 500 var(--t-2)/1.3 var(--mono); color: var(--pale); }
.cartes-rarete { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); }
.cartes-rarete figure { display: grid; gap: var(--e1); margin: 0; }
.cartes-rarete img { width: 100%; height: auto; aspect-ratio: auto; border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
  filter: saturate(.8) brightness(.9); transition: filter .35s var(--sortie); }
.cartes-rarete figure:hover img { filter: none; }
.texte .cartes-rarete img { aspect-ratio: 200 / 279; object-fit: cover; outline: 0; }
.plus summary { cursor: pointer; font-weight: 650; color: var(--emeraude); padding: var(--e1) 0; }
.plus .tableau { margin-top: var(--e1); }

/* ------------------------------------------------------------ la recherche du Pokédex (v4, 03/11/2026) */
/* Un champ large, la loupe à gauche, le raccourci « / » à droite, le bouton (sans script : la page des résultats) ;
   les suggestions de site.js tombent dessous. */
form.recherche-dex {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e1);
  margin-bottom: var(--e4);
}
.recherche-dex > svg, .recherche-dex .raccourci { grid-row: 1; grid-column: 1; pointer-events: none; position: relative; z-index: 1; }
.recherche-dex > svg { justify-self: start; margin-left: 18px; color: var(--emeraude); }
.recherche-dex .raccourci { justify-self: end; margin-right: 14px; color: var(--doux); transition: opacity .15s; }
.recherche-dex input[type=search] {
  grid-row: 1;
  grid-column: 1;
  min-height: 60px;
  padding: 0 52px;
  font-size: var(--t1);
  font-weight: 500;
  background: var(--fond-2);
  -webkit-appearance: none;
  appearance: none;
}
.recherche-dex input[type=search]::placeholder { color: var(--pale); opacity: 1; }
.recherche-dex input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.recherche-dex input:focus ~ .raccourci { opacity: 0; }
.recherche-dex .bouton { min-height: 60px; }
.suggestions {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--ombre);
}
.suggestions[hidden] { display: none; }
.texte .suggestions li + li { margin-top: 0; }
.suggestions a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e2);
  min-height: 56px;
  padding: 4px 12px;
  border-radius: 4px;
  color: var(--encre);
  text-decoration: none;
}
.suggestions img { width: 64px; height: 64px; max-width: none; margin: -12px; }
.suggestions b { grid-column: 2; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestions small { grid-column: 3; font: 500 var(--t-2)/1 var(--mono); color: var(--pale); font-variant-numeric: tabular-nums; }
.suggestions .actif a { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--emeraude); }
.suggestions .actif b { color: var(--emeraude-vif); }

/* ------------------------------------------------------------ la carte de région d'une fiche (v4, 03/11/2026) */
/* L'image du jeu (256 x 160, agrandie sans lissage), un voile sombre, et par-dessus (svg, mêmes cases de 8 px) les
   lieux où le Pokémon se trouve, en émeraude ; « visiteur » plus pâle et en pointillé. Survol : le nom du lieu. */
.cartes-lieux { display: grid; gap: var(--e2); margin-bottom: var(--e2); }
.cartes-grandes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--e2); }
.cartes-petites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); }
.texte figure.carte-lieux { margin: 0; gap: 10px; }
.carte-cadre {
  position: relative;
  border: 1px solid var(--trait);
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
}
.texte .carte-cadre img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: fill; border-radius: 0; outline: 0;
  filter: saturate(.45) brightness(.68) contrast(1.08); }
.carte-cadre svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte-cadre .voile { fill: #04100a; fill-opacity: .25; pointer-events: none; }
.zone { cursor: pointer; transition: opacity .25s; }
.zone .fond { fill: var(--emeraude-vif); fill-opacity: .82; filter: drop-shadow(0 0 3px rgba(116, 220, 150, .9)); }
.zone .tour { fill: none; stroke: #c8ffd9; stroke-width: 1; stroke-linecap: square; }
.zone.visiteur .fond { fill-opacity: .55; }
.zone.visiteur .tour { stroke-opacity: .6; }
.carte-cadre.choix .zone:not(.ressort) { opacity: .3; }
.zone.ressort .fond { fill: var(--emeraude-vif); fill-opacity: .95; }
.zone.ressort .tour { stroke: #fff; }
.carte-nom {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, calc(-100% - 8px));
  padding: 4px 9px;
  border: 1px solid var(--emeraude);
  border-radius: 4px;
  background: var(--fond);
  color: var(--encre);
  font: 500 var(--t-2)/1.2 var(--mono);
  white-space: nowrap;
  pointer-events: none;
}
.carte-nom.dessous { transform: translate(-50%, 8px); }
.carte-nom[hidden] { display: none; }
.carte-lieux figcaption b { color: var(--encre); font-weight: 500; }
tr[data-sec] { cursor: pointer; }
tr[data-sec] td { transition: background-color .2s; }
tr[data-sec]:hover td, tr.ressort td { background: var(--emeraude-voile); }
tr.ressort td:first-child { box-shadow: inset 2px 0 0 var(--emeraude); }

/* ------------------------------------------------------------ écrans moyens et petits */
@media (max-width: 1100px) {
  .une-gauche { grid-column: 1 / span 5; }
  .atouts { grid-column: 6 / -1; }
}
@media (max-width: 960px) {
  .wiki { grid-template-columns: minmax(0, 1fr); gap: var(--e3); padding-top: var(--e3); }
  .sommaire-large { display: none; }
  .sommaire-tel { display: block; }
  .article, .article.index, .article.pokemon { max-width: none; }
  .entete-dl, .corps-dl { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .sur-page { display: none; }
  .une-bas { grid-template-columns: minmax(0, 1fr); row-gap: var(--e5); }
  .une-gauche, .atouts { grid-column: 1; }
  .atouts { order: -1; }
}
@media (max-width: 640px) {
  :root { --t2: 1.375rem; --t3: 1.75rem; --t4: 2.25rem; }
  body { font-size: 1rem; }
  .haut-in { flex-wrap: wrap; gap: 0 var(--e2); min-height: 0; padding-top: 10px; }
  .menu { order: 3; width: 100%; gap: var(--e3); }
  .menu a { padding-block: 10px 12px; }
  .zone-compte:has(.sortie) > .bouton { display: none; }
  .une { min-height: 0; }
  .une-in { padding-block: var(--e3) var(--e5); }
  .une-meta { flex-direction: column; gap: 2px; }
  .une-titre { white-space: normal; font-size: min(21.5vw, 8rem); line-height: .86; margin-top: var(--e3); }
  .une-titre > * { display: block; }
  .une-bas { padding-top: var(--e4); row-gap: var(--e4); }
  .atouts { order: 0; }
  .atouts li { font-size: min(8.4vw, 2.5rem); }
  .une-gauche { gap: var(--e2); }
  .une-gauche .bouton { width: 100%; }
  .tuiles, .suite, .fiche, .galerie { grid-template-columns: minmax(0, 1fr); }
  .lignes a { grid-template-columns: 80px minmax(0, 1fr); row-gap: 2px; column-gap: var(--e2); }
  .lignes a > div { display: grid; gap: 2px; }
  .lignes b { font-size: var(--t1); }
  .suite a.apres { grid-column: 1; }
  .entete-article { grid-template-areas: "titre image" "resume resume"; column-gap: var(--e2); margin-bottom: var(--e4); }
  .portrait.grand { padding: 8px; }
  .portrait.grand img { width: 64px; height: 64px; }
  .versions > li { grid-template-columns: minmax(0, 1fr); gap: var(--e1); }
  .fiche div { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; }
  .carte { padding: var(--e3); }
  .pied-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pied-in > div:first-child { grid-column: 1 / -1; }
  .filtres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .recherche-dex .raccourci { display: none; }
  .cartes-petites { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e1); }
  .cartes-petites figcaption { font-size: 11px; }
  .recherche-dex input[type=search] { padding-right: var(--e2); min-height: 52px; }
  .recherche-dex .bouton { min-height: 52px; padding: 0 var(--e2); }
  form.recherche-dex { margin-bottom: var(--e3); }
  .filtres .recherche { grid-column: 1 / -1; }
  .dex { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .stats th { width: 6.5rem; }
  .cartes-rarete { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main.etroit { padding-top: var(--e4); }
}
@media (max-width: 420px) {
  th, td { padding: var(--e1) 12px; }
}

/* ------------------------------------------------------------ le mouvement */
/* L'accueil : chaque bloc monte et apparaît, l'un après l'autre (data-monte). Pendant l'entrée, site.js met la
   classe « attente » sur <html> : tout reste à sa première image, puis part quand l'entrée s'efface. Sans script :
   l'animation joue au chargement. */
@keyframes monte { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
@keyframes clignote { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sautille { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes luit { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
@media (prefers-reduced-motion: no-preference) {
  [data-monte] { animation: monte .9s var(--sortie) both; }
  .une-titre > :nth-child(1) { animation-delay: .05s; }
  .une-titre > :nth-child(2) { animation-delay: .14s; }
  .une-gauche { animation-delay: .3s; }
  .atouts-titre { animation-delay: .3s; }
  .atouts li { animation-duration: .8s; }
  .atouts li:nth-child(1) { animation-delay: .34s; }
  .atouts li:nth-child(2) { animation-delay: .38s; }
  .atouts li:nth-child(3) { animation-delay: .42s; }
  .atouts li:nth-child(4) { animation-delay: .46s; }
  .atouts li:nth-child(5) { animation-delay: .5s; }
  .atouts li:nth-child(6) { animation-delay: .54s; }
  .atouts li:nth-child(7) { animation-delay: .58s; }
  .atouts li:nth-child(8) { animation-delay: .62s; }
  .atouts li:nth-child(9) { animation-delay: .66s; }
  .atouts li:nth-child(10) { animation-delay: .7s; }
  .attente [data-monte] { animation-play-state: paused; }
  .entree.pret .entree-fleche { animation: sautille .7s steps(2, jump-none) infinite; }
  .entree.pret .entree-start { animation: clignote 1s steps(1) infinite; }
  .wiki .article { animation: monte .7s var(--sortie) both; }
  .zone:not(.ressort) .fond { animation: luit 2.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}