/* PKMN District, identite.
   Les packshots sont déjà très colorés : les surfaces restent blanches ou
   gris-bleu très clair pour les laisser ressortir, et la couleur du thème est
   concentrée sur le chrome (bandeaux, en-tête, pied de page) et les boutons. */

:root {
  /* Surfaces */
  --es-paper: #ffffff;
  --es-wash: #f3f6fb;      /* gris-bleu très clair, fond de section */
  --es-line: #e2e8f2;

  /* Chrome */
  --es-ink: #0e1a2b;       /* bleu nuit, header / footer / bandeaux */
  --es-ink-2: #17293f;
  --es-text: #0e1a2b;
  --es-text-soft: #55677f;

  /* Accents */
  --es-volt: #ffcb05;      /* jaune électrique, boutons et badges */
  --es-volt-dark: #e8b400;
  --es-red: #e3350d;       /* promo, urgence, rupture */
  --es-blue: #2a75bb;      /* liens, info */
  --es-green: #2e9e5b;     /* dispo, validé */

  /* Alias conservés pour ne pas casser les sections déjà écrites */
  --es-cream: var(--es-wash);
  --es-ink-soft: var(--es-text-soft);
  --es-brass: var(--es-blue);
  --es-brass-light: #dbe6f5;
  --es-seal: var(--es-red);

  --es-radius: 16px;
  --es-radius-sm: 10px;
  --es-shadow: 0 1px 2px rgba(14, 26, 43, .05), 0 10px 28px rgba(14, 26, 43, .08);
  --es-shadow-fort: 0 2px 6px rgba(14, 26, 43, .08), 0 18px 44px rgba(14, 26, 43, .14);

  --es-serif: "Poppins", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --es-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.es-section { background: var(--es-wash); padding: 60px 0; }
.es-wrap { max-width: 1320px; margin: 0 auto; padding: 0 20px; }

.es-kicker {
  font-family: var(--es-sans);
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--es-blue); margin: 0 0 10px;
}

.es-title {
  font-family: var(--es-serif);
  font-size: clamp(24px, 3.2vw, 38px); font-weight: 700;
  line-height: 1.12; letter-spacing: -.02em;
  color: var(--es-text); margin: 0 0 8px;
}

.es-sub {
  font-family: var(--es-sans);
  font-size: 15.5px; line-height: 1.55; color: var(--es-text-soft); margin: 0;
}

/* --- Mobile : c'est là que 80 % du trafic arrive, on serre les marges
   et on réduit les respirations verticales plutôt que de tout garder. --- */
@media (max-width: 749px) {
  .es-section { padding: 36px 0; }
  .es-wrap { padding: 0 16px; }
  .es-title { font-size: clamp(21px, 6vw, 27px); }
  .es-sub { font-size: 14.5px; }
  .es-kicker { font-size: 11px; letter-spacing: .14em; }
}