/* =========================================================
   Musekai — styles.css  (Base + Thèmes + A11y + Responsive)
   ========================================================= */

/* ---------- Reset léger ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #222;
  background: #fff;
  -webkit-text-size-adjust: 100%;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible {
  outline: 3px solid #0057ff;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Variables globales ---------- */
:root{
  /* palette neutre */
  --black:#0a0a0a; --white:#fff; --bg:#f6f6f7; --text:#222; --muted:#6b7280;
  /* accents “groupe” */
  --gold:#B19768; --gold-strong:#8E6E37;
  /* couleurs pôles (répliquées en thèmes plus bas) */
  --musekai:#0a0a0a; --musekai-accent:#B19768;
  --shinsekai:#D2B48C; --shinsekai-bg:#f4efe7;
  --domuwari:#7C5A3A; --domuwari-accent:#C3A061;
  --kosenkai:#9E1A1A;
  --koorama:#111; --koorama-accent:#ff1e90; /* magenta */
  --primakademia:#0F1B3D; --primakademia-accent:#B19768;
  --dailyhikari:#F06A2B;
  --yumiterra:#5A7F53; /* matcha */
  /* UI */
  --max:1200px;
  --gap:1rem;
  --radius:12px;
  --shadow:0 6px 24px rgba(0,0,0,.06);

  /* thème courant (peut être écrasé par .theme-*) */
  --brand: var(--gold);
  --brand-2: var(--gold-strong);
  --bg-page:#fff;
  --bg-soft:#fafafa;
  --card:#fff;
  --text-strong:#111;
}

/* Mode sombre (auto) */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bg-page:#0b0c0f;
    --bg-soft:#121317;
    --card:#151821;
    --text:#e5e7eb;
    --text-strong:#fafafa;
    --muted:#9aa4b2;
    --shadow:0 8px 32px rgba(0,0,0,.35);
  }
}

/* Réduction des animations si demandé */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Layout de base ---------- */
.container{ max-width:var(--max); margin-inline:auto; padding-inline: clamp(.8rem, 2vw, 1.2rem); }
.section{ max-width:var(--max); margin:3rem auto; padding:0 var(--gap); }
.grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.split{ display:grid; gap:var(--gap); grid-template-columns: 1.2fr .8fr; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1rem; background:var(--bg-page);
  border-bottom:1px solid #e5e7eb; box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.brand{ font-family: Montserrat, Poppins, system-ui, sans-serif; font-weight:800; letter-spacing:.06em; }
.brand::before{
  content:""; display:inline-block; width:12px; height:12px; border-radius:999px;
  background:var(--brand); margin-right:.5rem; transform: translateY(-1px);
}
.nav-toggle{ display:none; background:none; border:0; font-size:1.5rem; }
.site-nav{ display:flex; gap:1rem; }
@media (max-width:900px){
  .nav-toggle{ display:block; }
  .site-nav{ position:fixed; inset:auto 0 0 0; top:64px; background:var(--bg-page);
    border-top:1px solid #e5e7eb; padding:1rem; display:none; }
  .site-nav.open{ display:block; }
}

/* ---------- Typo & éléments ---------- */
h1,h2,h3{ margin:0 0 .25rem; color:var(--text-strong); line-height:1.2; }
h1{ font-size: clamp(32px, 6vw, 56px); font-family: Montserrat, Poppins, sans-serif; font-weight:700; }
h2{ font-size: clamp(22px, 3vw, 28px); }
h3{ font-size: 18px; }
p{ margin:.25rem 0; color:var(--text); }
.muted{ color:var(--muted); opacity:.9; }
.kicker{ text-transform: uppercase; letter-spacing:.18em; font-size:.8rem; color:var(--muted); }

/* ---------- Composants ---------- */
.card{
  background:var(--card); border:1px solid #eee; border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow:0 10px 36px rgba(0,0,0,.1); }
.btn{
  display:inline-block; padding:.7rem 1rem; border-radius:999px; font-weight:600;
  border:1px solid var(--brand); background:var(--brand); color:#111;
  box-shadow:0 6px 18px rgba(0,0,0,.08); cursor:pointer;
}
.btn-ghost{ background:transparent; color:var(--text-strong); }
.btn-primary{ background:var(--brand); border-color:var(--brand); color:#111; }
.badge{ display:inline-block; padding:.35rem .7rem; border-radius:999px; background:rgba(0,0,0,.06); }

/* ---------- Sections récurrentes ---------- */
.hero{
  min-height:60vh; display:grid; place-items:center; text-align:center;
  padding:4rem 1rem; color:var(--white);
  background: radial-gradient(1200px 600px at 50% 10%, #202020 0%, #0a0a0a 60%, #000 100%);
  border-radius:18px; margin:2rem 1rem 0;
}
.hero .btn{ background:var(--brand); border-color:var(--brand); }

.kpi{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:1rem; }
.kpi .card{ text-align:center; }
.kpi .card h3{ font-size: clamp(26px, 4vw, 36px); }

/* ---------- Thèmes par pôle ----------
   (applique .theme-{pole} sur <body> ou un wrapper racine) */
.theme-musekai{ --brand: var(--musekai-accent); --bg-page:#fff; }
.theme-shinsekai{ --brand: var(--shinsekai); --bg-page: var(--shinsekai-bg); }
.theme-domuwari{ --brand: var(--domuwari-accent); }
.theme-kosenkai{ --brand: var(--kosenkai); }
.theme-koorama{ --brand: var(--koorama-accent); }
.theme-primakademia{ --brand: var(--primakademia-accent); --bg-page:#0f1b3d; --card:#121e46; }
.theme-dailyhikari{ --brand: var(--dailyhikari); }
.theme-yumiterra{ --brand: var(--yumiterra); }

/* Badges de carte colorés par thème */
.theme-shinsekai .card::before,
.theme-domuwari .card::before,
.theme-kosenkai .card::before,
.theme-koorama .card::before,
.theme-primakademia .card::before,
.theme-dailyhikari .card::before,
.theme-yumiterra .card::before{
  content:""; display:block; height:6px; border-radius:6px; margin-bottom:.8rem; background:var(--brand);
}

/* ---------- Footer ---------- */
.site-footer{
  padding:2rem 1rem; text-align:center; border-top:1px solid #eaeaea; background:#fafafa;
  color:#555;
}
.site-footer a{ color:#555; text-decoration: underline; }

/* ---------- Utilitaires ---------- */
.container-narrow{ max-width:900px; margin-inline:auto; padding-inline:1rem; }
.center{ text-align:center; }
.hide{ display:none !important; }
.flex{ display:flex; gap:.8rem; align-items:center; }
.right{ margin-left:auto; }
.round{ border-radius:999px; }
.soft{ background:var(--bg-soft); }
.shadow{ box-shadow:var(--shadow); }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Impression ---------- */
@media print{
  .site-header, .site-footer, .nav, .btn, video { display:none !important; }
  body{ background:#fff; color:#000; }
  .card{ box-shadow:none; border:1px solid #ddd; }
}