/* caz5 — type pokecardex (base de cartes TCG : clair moderne, Urbanist, bleu #2447a8) */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#eef1f3; --surface:#fff; --surface-2:#f6f8f9;
  --ink:#0b1220; --head:#1e2433; --text:#3a4252; --muted:#6b7785; --faint:#9aa4b2;
  --border:#e3e8 eb; --border:#e3e8eb; --border-2:#d5dce1;
  --blue:#2447a8; --blue-d:#1b3580; --blue-soft:#eef2fb; --blue-hi:#3a64d8;
  --red:#e3350d; --yellow:#ffcb05; --green:#1aa64b;
  --radius:14px; --radius-sm:10px; --pill:999px;
  --shadow:0 4px 18px rgba(11,18,32,.07); --shadow-sm:0 1px 3px rgba(11,18,32,.06);
  --maxw:1240px;
  --font:'Urbanist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;font-size:15px}
a{color:var(--blue);text-decoration:none}a:hover{color:var(--blue-d)}
img{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--head);font-weight:800;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.4rem,2.6vw,2rem)}
h3{font-size:1.1rem;font-weight:700}
p{margin:0 0 1rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:40px 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:700;font-size:.92rem;padding:11px 20px;border-radius:var(--radius-sm);border:0;cursor:pointer;transition:.15s;color:#fff;background:var(--blue)}
.btn:hover{background:var(--blue-d);color:#fff}
.btn-ghost{background:var(--surface);color:var(--head);border:1px solid var(--border-2)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.btn-pill{border-radius:var(--pill)}
.btn-lg{padding:14px 26px;font-size:1rem}

/* logo wordmark */
.pcx{font-weight:900;font-size:1.45rem;letter-spacing:-.04em;display:inline-flex;align-items:center}
.pcx .a{color:var(--red)}.pcx .b{color:var(--blue)}
.pcx .ball{width:24px;height:24px;border-radius:50%;background:linear-gradient(#e3350d 0 50%,#fff 50% 100%);border:2px solid var(--ink);position:relative;margin-right:7px}
.pcx .ball::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid var(--ink);top:50%;left:50%;transform:translate(-50%,-50%)}

/* header */
header.site{background:#f2f5f5;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:90}
.nav{display:flex;align-items:center;gap:26px;height:62px}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:14px}
.nav-links a{color:var(--head);font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:5px}
.nav-links a:hover{color:var(--blue)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-right .flags{font-size:.9rem;letter-spacing:2px}

/* hero */
.hero{padding:46px 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero .wordmark{font-size:clamp(2.6rem,6vw,4.2rem);font-weight:900;letter-spacing:-.05em;line-height:1;margin-bottom:14px}
.hero .wordmark .a{color:var(--red)}.hero .wordmark .b{color:var(--blue)}
.hero .tag{color:var(--muted);font-weight:700;letter-spacing:.02em;margin-bottom:16px}
.hero p{color:var(--text);max-width:520px}
.app-badges{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.app-badge{background:var(--ink);color:#fff;border-radius:10px;padding:9px 16px;font-weight:700;font-size:.82rem;display:flex;align-items:center;gap:8px}
.app-badge small{display:block;font-size:.62rem;opacity:.8;font-weight:500}
.phone{background:linear-gradient(135deg,#2447a8,#3a64d8);border-radius:30px;padding:16px;box-shadow:var(--shadow);aspect-ratio:9/16;max-width:280px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.phone .scr{background:#fff;border-radius:18px;flex:1;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.phone .mc{aspect-ratio:3/4;border-radius:8px}
.searchbar{margin-top:26px;display:flex;max-width:560px;background:#fff;border:1px solid var(--border-2);border-radius:var(--pill);padding:6px 6px 6px 18px;align-items:center;gap:10px}
.searchbar input{flex:1;border:0;outline:0;font-family:var(--font);font-size:.95rem;background:transparent}

/* séries grid */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:14px;flex-wrap:wrap}
.serie-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.serie{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 14px;text-align:center;position:relative;transition:.15s;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.serie:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue)}
.serie .code{position:absolute;top:8px;left:8px;background:var(--ink);color:#fff;font-size:.62rem;font-weight:800;padding:2px 7px;border-radius:6px}
.serie .logo{font-weight:900;font-size:1rem;letter-spacing:-.02em;line-height:1.05}
.serie .cnt{font-size:.72rem;color:var(--muted);font-weight:600}

/* articles */
.art-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.art{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.15s}
.art:hover{box-shadow:var(--shadow)}
.art .thumb{aspect-ratio:16/9}
.art .b{padding:14px}
.art .b .cat{font-size:.68rem;font-weight:800;text-transform:uppercase;color:var(--blue);letter-spacing:.05em}
.art .b h3{margin:5px 0;font-size:.98rem;color:var(--head)}
.art .b .dt{font-size:.74rem;color:var(--faint)}

/* ===== series page ===== */
.crumb{font-size:.8rem;color:var(--muted);padding:14px 0}
.set-head{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-bottom:18px}
.set-head .setlogo{min-width:200px;height:96px;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:1.3rem;text-align:center;padding:10px;background:linear-gradient(135deg,#1a2a6c,#2447a8);color:#fff}
.set-head .info{flex:1;min-width:220px}
.set-head h1{font-size:2rem;margin-bottom:10px}
.set-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.badge{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:5px 11px;font-size:.78rem;font-weight:700;color:var(--text)}
.badge.code{background:var(--ink);color:#fff;border-color:var(--ink)}
.set-actions{display:flex;gap:10px;flex-wrap:wrap}

.filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-radius:var(--pill);padding:8px 14px;margin-bottom:16px}
.filterbar .rar{width:30px;height:30px;border-radius:50%;border:1px solid var(--border-2);display:grid;place-items:center;font-size:.8rem;cursor:pointer;background:var(--surface-2)}
.filterbar .rar.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.filterbar .sp{flex:1}
.filterbar input{border:1px solid var(--border-2);border-radius:var(--pill);padding:7px 14px;font-family:var(--font);min-width:180px}

/* cards grid */
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.pcard{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:.15s;position:relative}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pcard .num{position:absolute;top:6px;left:6px;z-index:2;background:rgba(0,0,0,.55);color:#fff;font-size:.62rem;font-weight:800;padding:2px 6px;border-radius:5px}
.pcard .chk{position:absolute;top:6px;right:6px;z-index:2;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.85);border:1px solid var(--border-2)}
/* faux carte pokémon */
.pokeimg{aspect-ratio:63/88;border-radius:9px;margin:7px;border:5px solid #ffd34d;background:#f4d24a;position:relative;overflow:hidden;display:flex;flex-direction:column}
.pokeimg .top{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;font-size:.6rem;font-weight:800;color:#3a2c00}
.pokeimg .art{flex:1;margin:0 6px;border-radius:4px;border:2px solid #cda93a}
.pokeimg .nm{padding:4px 6px;font-size:.58rem;font-weight:800;color:#3a2c00;background:rgba(255,255,255,.4);text-align:center}
.pcard .meta{padding:8px 10px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.pcard .meta .cn{font-weight:700;font-size:.82rem;color:var(--head)}
.pcard .meta .pr{font-weight:800;font-size:.82rem;color:var(--green)}

.callout{background:var(--blue-soft);border:1px solid #cdd9f6;border-radius:var(--radius-sm);padding:13px 16px;font-size:.86rem;color:var(--blue-d);margin:14px 0}

/* footer */
footer.site{background:var(--ink);color:#9aa6bb;padding:38px 0 22px;margin-top:30px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px;margin-bottom:22px}
footer.site h4{color:#fff;margin-bottom:12px;font-size:.92rem}
footer.site a{color:#9aa6bb;font-size:.85rem;display:block;margin-bottom:7px}footer.site a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:16px;font-size:.78rem;color:#6b7689;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

@media(max-width:1000px){
  .serie-grid,.cards{grid-template-columns:repeat(4,1fr)}.art-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}.phone{display:none}
}
@media(max-width:600px){
  .serie-grid,.cards{grid-template-columns:repeat(3,1fr)}.nav-links{display:none}
}