/* Digimon World — Solution & Guide.
   Modern restyle of the original saetta.free.fr fan-site. */
:root {
  --navy: #0b1f3a;
  --navy-2: #11294a;
  --blue: #1f9ed9;
  --teal: #2bb3c0;
  --amber: #ff8a1f;
  --amber-d: #e6730a;
  --bg: #eef3f8;
  --paper: #ffffff;
  --ink: #1a2533;
  --muted: #5b6b7a;
  --border: #d8e2ec;
  --maxw: 1060px;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(11,31,58,.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.65 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
img { max-width: 100%; height: auto; }

.skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* ---- Header ---- */
.site-header {
  background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 12px; }
.brand { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.25rem; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; }
.brand b { color: var(--amber); }
.brand span { font-weight: 400; font-size: .82rem; opacity: .8; }
.header-right { display: flex; align-items: center; gap: 10px; }
.lang-switch { display: flex; gap: 4px; background: rgba(255,255,255,.1); border-radius: 999px; padding: 3px; }
.lang-switch a { color: #cfe0ef; text-decoration: none; font-size: .8rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.lang-switch a.active { background: var(--amber); color: #1a2533; }
.nav-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,.45); color: #fff; font-size: 1.3rem; line-height: 1; padding: 4px 10px; border-radius: 8px; cursor: pointer; }

/* ---- Nav ---- */
.site-nav { background: var(--navy-2); border-top: 1px solid rgba(255,255,255,.06); }
/* margin: 0 auto, not margin: 0 — this <ul> carries .wrap, whose whole job is
   the auto side margins that centre it in the page column. A shorthand with an
   explicit horizontal value silently overrides them and the nav sits flush
   left while the header above it stays centred. */
.site-nav ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0 auto; padding: 0; }
.site-nav a {
  display: block; color: #d4e2f0; text-decoration: none; font-size: .86rem; font-weight: 600;
  padding: 11px 14px; white-space: nowrap; border-bottom: 3px solid transparent;
}
.site-nav a:hover, .site-nav a:focus { background: rgba(255,255,255,.06); color: #fff; }
.site-nav a.active { color: #fff; border-bottom-color: var(--amber); }

/* ---- Hero (home) ---- */
.hero {
  /* auto, for the reason spelled out on .site-nav ul above: .hero also carries
     .wrap, and `22px 0 6px` was zeroing the side margins that centre it. The
     hero sat 110px left of the content card below it. */
  margin: 22px auto 6px; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(160deg, #bfe2f5 0%, #9fcdef 55%, #cfe6f7 100%);
  box-shadow: var(--shadow); text-align: center; padding: 18px 16px 22px;
}
.hero img { border-radius: 8px; box-shadow: 0 4px 14px rgba(11,31,58,.25); }
.hero .tag { margin: 16px auto 0; max-width: 640px; color: #0d3a57; font-size: 1.05rem; font-weight: 500; }
.hero .cta { margin-top: 16px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-block; text-decoration: none; font-weight: 700; padding: 11px 20px; border-radius: 999px; transition: transform .05s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--amber); color: #1a2533; }
.btn-primary:hover { background: var(--amber-d); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.7); color: var(--navy); }
.btn-ghost:hover { background: #fff; }

/* ---- Preservation callout ---- */
.callout {
  margin: 18px 0; padding: 14px 16px; border-radius: var(--radius);
  background: #fff6e9; border: 1px solid #ffd9a8; border-left: 4px solid var(--amber);
  color: #5a3c12; font-size: .95rem;
}
.callout strong { color: #7a4e10; }
.callout-warn { background: #fdecec; border-color: #f3b6b6; border-left-color: #d6453f; color: #6a2420; }
.callout-warn strong { color: #8a2a24; }

/* ---- Section cards (home) ---- */
.sections { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); margin: 18px 0; }
.sec-card {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); transition: border-color .15s, transform .1s;
}
.sec-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.sec-card .ic { font-size: 1.6rem; }
.sec-card h3 { margin: 2px 0 0; color: var(--navy); font-size: 1.05rem; }
.sec-card p { margin: 0; color: var(--muted); font-size: .85rem; }

/* ---- Main / content ---- */
main { padding: 8px 0 56px; }
.page {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 30px; box-shadow: var(--shadow); overflow-wrap: anywhere; margin-top: 22px;
}
.page > h1 { margin: 0 0 18px; color: var(--navy); font-size: 1.8rem; position: relative; padding-bottom: 12px; }
.page > h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; background: var(--amber); border-radius: 2px; }
.page h2 { color: var(--navy); }
.page a { color: var(--blue); font-weight: 600; text-decoration: none; }
.page a:hover { text-decoration: underline; color: var(--amber-d); }
.page p { margin: 0 0 1em; }
.page hr, .page img[src*="barre.gif"] { display: none; } /* drop legacy divider gifs */

/* ---- Legacy tables -> readable + responsive ---- */
.page table { border-collapse: collapse; margin: 16px 0; max-width: 100%; background: #fff; }
.page td, .page th { border: 1px solid var(--border); padding: 7px 10px; vertical-align: top; font-size: .92rem; }
.page th { background: #eef4fa; font-weight: 600; text-align: left; }
.page th[scope="colgroup"] { background: var(--navy-2); color: #fff; text-align: center; }
/* .page sets overflow-wrap: anywhere so long legacy URLs cannot widen the page.
   Inside a narrow cell that same rule breaks ordinary words one letter per line
   ("Recrut / er Palmon"), so cells opt out and the table scrolls instead. */
.page table, .page td, .page th { overflow-wrap: normal; word-break: normal; hyphens: none; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
.page table.t-scroll { min-width: 34rem; }
/* ...but never inside a card. That min-width exists so a wide data table keeps
   its columns legible and scrolls as a unit; a pop-card holds a five-row
   key/value table that fits in 289px, and forcing it to 544px turned all 55
   cards on the digivolution and techniques pages into little windows you had
   to scroll sideways inside. */
.page .card table.t-scroll { min-width: 0; }

/* ---- Pop-card pages (digivolution / techniques) ---- */
.tier { color: var(--navy); margin: 30px 0 14px; font-size: 1.3rem; padding-bottom: 8px; border-bottom: 2px solid var(--border); }
.tier .count { color: var(--muted); font-weight: 400; font-size: .9rem; }
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(244px,1fr)); align-items: start; }
.page .card {
  position: static !important; display: block !important; width: auto !important; margin: 0;
  border: 1px solid rgba(11,31,58,.18); border-radius: 10px; padding: 10px; font-size: .9rem;
  box-shadow: var(--shadow);
}
/* border: none because exactly one card in the archive (Agumon's) carries a
   border="1" attribute the other 109 do not, and it renders as a box around
   that one sprite. */
.page .card table { width: 100% !important; margin: 0; background: transparent; border: none; }
.page .card td { border: none; padding: 2px 4px; }
.page .card img { display: block; margin: 0 auto 6px; image-rendering: auto; }
.page .card.poptrain { background: #e9f7e6; }
.page .card.popchamp { background: #fffbe0; }
.page .card.popult   { background: #e6f1fb; }
.page .card.popult2  { background: #eceef1; }
.page .card.poptech  { background: #ffeef0; }

.sub { margin-bottom: 30px; }
.sub h2 { color: var(--navy); border-bottom: 2px solid var(--border); padding-bottom: 6px; }

/* ---- Footer ---- */
.site-footer { background: var(--navy); color: #aebfd0; padding: 28px 0; font-size: .85rem; }
.site-footer a { color: #7fc4ec; }
.site-footer .muted { color: #6f8197; margin-bottom: 0; }

/* Alone in its own paragraph, so it is a standalone control rather than a link
   in a sentence and cannot claim the WCAG 2.5.8 inline exemption. At .85rem the
   bare line box is ~22px; the padding takes it over 24. */
.site-footer .gh-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 2px;
}
.muted { color: var(--muted); }

/* ---- In-page anchors under the sticky header ---- */
/* Without this the walkthrough's shortcut links land the section title behind
   the header, so a click on "Capitale" arrives mid-paragraph. */
:root { --header-h: 60px; }
#content, .page [id] { scroll-margin-top: calc(var(--header-h) + 14px); }

/* The back-to-top button moves focus here so the next Tab resumes from the top
   rather than from where the reader had scrolled to. tabindex="-1" on <main> is
   what makes that focus() do anything at all — without it the call is a no-op.
   The ring is left to :focus-visible so keyboard users get it and a click does
   not paint one. */
#content:focus { outline: none; }
#content:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* ---- Icon links from the archive ---- */
/* 12x15px GIFs used as links. They keep their look but get a touch-sized hit
   area and, through the build, an accessible name. */
.page a.screen-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; min-height: 28px; vertical-align: middle; margin: 0 2px;
  border-radius: 6px; background: var(--bg); border: 1px solid var(--border);
}
.page a.screen-link:hover { background: #fff; border-color: var(--blue); }
.page a.screen-link img { display: block; }

/* Table links are overwhelmingly navigation — the walkthrough's area shortcuts
   live there — and a bare 16px line box is below any touch guideline.
   Descendant, not child: the archive wraps most of them in <div align="center">.
   Links in a paragraph are left alone instead, since WCAG 2.5.8 exempts a
   target sized by the line-height of the sentence around it, and padding those
   would break the prose rhythm. The split is by container, not by role, so it
   is approximate in one direction: astuces.html has a prose link inside a <td>
   and gets the padding anyway. Harmless — a too-large target breaks nothing. */
.page td a:not(.screen-link), .page th a:not(.screen-link) {
  display: inline-block; padding: 5px 2px;
}

/* ---- Back to top ---- */
/* Replaces the 20 inline 15px arrows the archive repeated after each banner. */
.to-top-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: none; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: none; border-radius: 999px;
  background: var(--navy); color: #fff; font: 600 .85rem/1 inherit;
  font-family: inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(11,31,58,.3);
}
.to-top-btn:hover { background: var(--amber); color: var(--ink); }
.to-top-btn.show { display: inline-flex; }

/* ---- Mobile ---- */
@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  .site-nav ul { display: none; flex-direction: column; }
  /* The 17 entries are taller than the viewport; the panel scrolls on its own
     instead of pushing the page content out of reach. */
  .site-nav.open ul {
    display: flex; max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav a { padding: 13px 16px; border-top: 1px solid rgba(255,255,255,.08); border-bottom: none; }
  .site-nav a.active { border-left: 3px solid var(--amber); border-bottom: none; }
  .page { padding: 18px 16px; }
  .brand span { display: none; }
}

/* ---- Tables as cards on narrow screens ---- */
/* Only tables whose columns are actually named (build.py stamps data-label from
   the header row) can become cards; the others keep scrolling horizontally. */
@media (max-width: 600px) {
  .page table.t-cards { min-width: 0; width: 100%; border: none; }
  .page table.t-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .page table.t-cards tr {
    display: block; margin-bottom: 12px; border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden; background: #fff;
  }
  .page table.t-cards td { display: flex; gap: 10px; border: none; border-top: 1px solid var(--border); }
  .page table.t-cards tr td:first-child { border-top: none; }
  .page table.t-cards td::before {
    content: attr(data-label); flex: 0 0 8.5rem; font-weight: 600; color: var(--muted);
  }
  .page table.t-cards td:not([data-label]) { display: block; }
  .page table.t-cards th[scope="colgroup"] { display: block; border-radius: 8px; margin-bottom: 8px; }
}