/* Charte Athéna Wiki / AthenaBoard */
:root{
  --bg:#EAF3FF; --surface:#FFFFFF; --ink:#1E2440; --muted:#59607A;
  --stroke:#1E2440; --soft:#D5E3FA; --primary:#2F6BFF; --on-primary:#FFFFFF;
  --on-tile:#1E2440; color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131731; --surface:#1E2348; --ink:#F2F4FF; --muted:#B1B6D6;
    --stroke:#05070F; --soft:#2A3060; --primary:#7FA2FF; --on-primary:#0C1030; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#131731; --surface:#1E2348; --ink:#F2F4FF; --muted:#B1B6D6;
  --stroke:#05070F; --soft:#2A3060; --primary:#7FA2FF; --on-primary:#0C1030; color-scheme:dark;
}
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font:400 1.0625rem/1.5 "Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0); }
h1,h2,h3{ font-family:"Baloo 2","Trebuchet MS",system-ui,sans-serif; line-height:1.15; margin:0; }
:focus-visible{ outline:3px solid var(--primary); outline-offset:3px; border-radius:12px; }
.wrap{ max-width:1100px; margin:0 auto; padding:16px 18px 48px; }

.top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand-logo{ flex:none; width:30px; height:35px; background:var(--primary);
  -webkit-mask:url("logo-mask.png") center/contain no-repeat; mask:url("logo-mask.png") center/contain no-repeat; }
.brand-name{ font:700 1.5rem/1.1 "Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif; letter-spacing:-.01em; }
.brand-name b{ color:var(--primary); }
.iconbtn{ border:2.5px solid var(--stroke); background:var(--surface); border-radius:14px; padding:6px 12px; cursor:pointer; font-size:1rem; }

.search{ display:flex; gap:8px; margin-bottom:22px; }
.search input{ flex:1; min-width:0; font:inherit; font-size:1.15rem; color:var(--ink); background:var(--surface);
  border:3px solid var(--stroke); border-radius:18px; padding:14px 16px; box-shadow:4px 4px 0 var(--stroke); }
.search input::placeholder{ color:var(--muted); }

.section-title{ font-size:1.5rem; font-weight:800; margin:0 0 12px; }
#tabs{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
#tabs button{ border:3px solid var(--stroke); border-radius:99px; background:var(--mat,var(--surface)); color:var(--on-tile);
  padding:6px 16px; font:800 1.05rem "Baloo 2",system-ui,sans-serif; cursor:pointer; box-shadow:3px 3px 0 var(--stroke);
  transition:transform .12s, box-shadow .12s; }
#tabs button:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--stroke); }
#tabs button.on{ transform:translate(3px,3px); box-shadow:0 0 0 var(--stroke); outline:3px solid var(--primary); outline-offset:2px; }

#msg{ color:var(--muted); margin:0 0 14px; }
#grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.c{ background:var(--surface); border:3px solid var(--stroke); border-radius:22px; overflow:hidden; cursor:pointer;
  box-shadow:5px 5px 0 var(--stroke); transition:transform .12s, box-shadow .12s; display:flex; flex-direction:column; }
.c:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--stroke); }
.c:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--stroke); }
.c .im{ position:relative; aspect-ratio:16/9; background:var(--soft); border-bottom:3px solid var(--stroke); }
.c img{ width:100%; height:100%; object-fit:cover; display:block; }
.chip{ position:absolute; left:10px; bottom:10px; font-size:.85rem; font-weight:700; padding:2px 10px; border-radius:99px;
  border:2px solid var(--stroke); background:var(--mat); color:var(--on-tile); }
.c .tx{ padding:12px 14px 14px; }
.c h3{ font-size:1.12rem; font-weight:800; margin-bottom:4px; }
.c small{ color:var(--muted); font-size:.95rem; }
#more{ display:block; margin:28px auto 0; border:3px solid var(--stroke); background:var(--primary); color:var(--on-primary);
  border-radius:18px; padding:12px 26px; font:800 1.1rem "Baloo 2",system-ui,sans-serif; cursor:pointer; box-shadow:4px 4px 0 var(--stroke); }

dialog{ width:min(960px,96vw); padding:0; border:3px solid var(--stroke); border-radius:22px; background:#000; overflow:hidden; box-shadow:6px 6px 0 var(--stroke); }
dialog iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }
dialog::backdrop{ background:#0008; }
.foot{ font-size:.9rem; color:var(--muted); text-align:center; margin-top:40px; }
.foot a{ color:var(--primary); }
@media (max-width:520px){ .brand-name{ font-size:1.25rem; } #grid{ grid-template-columns:1fr; } }

.legal h1{ font-size:2rem; margin-bottom:12px; }
.legal h2{ font-size:1.25rem; margin:22px 0 6px; }
.legal p{ margin:0 0 10px; max-width:65ch; }
.legal a{ color:var(--primary); }